时间戳

首页 > 解决方案 > React/Next js 站点上的 img 导入错误

javascript - React/Next js 站点上的 img 导入错误

问题描述

社区。最近，我在我的 React/Next JS 站点中遇到了一个非常烦人的错误。

如果我使用 src='/static/images/service'/>，我将无法显示任何图像。导入和分配这样的路由：import Image1 from "../../static/images/service.png";到 js 变量也无济于事。

根据 Next Js 文档，所有资产都应严格存储在根文件夹中的“/static”文件夹中。

奇怪的是，我可以在 CSS 中使用 background-image 毫无问题地访问图像

background-image: url("../../static/images/service.png");但<img/>不碍事。这对我来说是唯一的选择，因为我使用 .map 方法来渲染图像并为它们提供数组中的路径。

另外，我安装了所有可能的加载器，用于安装不同类型的文件。

这种行为可能是什么问题？

链接到我的仓库：https ://github.com/kkdima/barva

在你的机器上测试它：

git clone https://github.com/kkdima/barva.git

npm i

npm run dev

标签： javascriptreactjsimageimportnext.js

解决方案

而不是在 img 标签的 src 中给出路径。将其导入您的文件中，然后使用它。它有望解决问题。下面的代码：

import Image1 from "../../static/images/service.png";

然后像这样提供 src：

<img src={Image1} />

推荐阅读