React/Next js 站点上的 img 导入错误答案

【问题标题】：img import bug on the React/Next js siteReact/Next js 站点上的 img 导入错误
【发布时间】：2019-08-08 08:43:06
【问题描述】：

社区。最近我在我的 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 方法来渲染图像并为它们提供数组中的路径。

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

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

在你的机器上测试它：

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

npm i

npm run dev

【问题讨论】：

【解决方案1】：

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

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

然后像这样提供源代码：

<img src={Image1} />

【讨论】：

【解决方案2】：

为此，您需要在 next.config.js 中添加图像加载器。您可以为此使用 next-images 包。以下是包的链接：

【讨论】：