reactjs nextjs应用程序不解析/显示自定义图标

yzuktlbb 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(107)

当我尝试使用加载到源代码中的图标时，我得到了这个可爱的默认图标：

我不确定我在这里遗漏了什么。下面是我的文件树的结构：

在尝试使用图标时（在本例中，我尝试使用Ellipse6.png），我将源代码称为“../style/assets/Ellipse6.png”。下面是我使用它的代码片段（在index.jsx文件中）：

<div className="col-sm-6 pl-sm-2 pr-sm-0">
          <Card>
            <Card.Body>
            <Carousel className={"carousel"}>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src='../style/assets/Ellipse 7.png'
                  alt="First slide"
                />
...

我发誓导入路径是完美的，我不明白为什么.png可能不被支持。还有什么我错过了吗？

reactjs

来源：https://stackoverflow.com/questions/76040983/nextjs-app-not-resolving-displaying-custom-icons

2条答案

按热度按时间

yhived7q1#

你有没有试过使用/../style/assets/ellipse-7.png的图像名称？这可能是原因。
如果您正在访问public文件夹，则应将/放在开头。

赞(0）回复(0）举报 2023-04-20

sg3maiej2#

我认为你应该把图片和图标保存在公共文件夹中而不是样式文件夹中。因为公共文件夹是保存图片和图标的地方。
在你的路由路径中使用/。例如，如果你有包含图标文件夹的资产文件夹，在公共文件夹中使用/assets/icons/youricon.png。在你的情况下，如果你把你的图标直接放在公共文件夹中的资产文件夹中。

<img
 className="d-block w-100"
 src='/assets/Ellipse 7.png'
 alt="First slide"
/>

您也可以尝试通过公共文件夹导航，如下所示，但我建议将您的图标和图像放在公共文件夹中。

<img
 className="d-block w-100"
 src='/../style/assets/Ellipse 7.png'
 alt="First slide"
/>

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs nextjs应用程序不解析/显示自定义图标

2条答案

相关问题

热门标签

最新问答