一些图像即使存在也没有加载到反应应用程序中

Question

我正在开发一个反应应用程序。在开发中一切正常。当我使用npm run build 进行构建并对其进行测试时，会显示页面上的一些图像并且根本找不到一些图像。我可以看到显示了用户头像图像，但未显示所有其他图像。我在浏览器中检查了代码并检查了图像的src。路径很好，图片也可以在./static/media/card-1.7a6bc100.jpg 中找到，但没有显示在页面上。然后我检查了用户头像图像的代码，src 看起来很相似，并且该图像工作正常。我不确定它为什么会这样。下面是我的源代码的样子。

import marc from "assets/img/faces/marc.jpg";

然后我的img 标签看起来像：

<img src={marc} className={imgStyle} alt="..." />

它总是吐出... 这些点，这意味着图像未加载，但图像在那里可用，当我在浏览器中检查此图像时，路径也是完美的。谁能帮助我为什么要在生产中这样做？解决这个问题已经有几个小时了，但没有找到任何解决方案。

我们将不胜感激。

谢谢。

Answer 1

如果您使用的是create-react-app，资产也需要在src 内提供。您还应该使用相对路径而不是绝对路径来引用图像。例如：

图片在src/assets/img/faces下

你的代码在src/some-folder/your-code.js下

// your-code.js
import marc from "../assets/img/faces/marc.jpg";

Answer 2

把你的图片放在public/images/文件夹中，这样使用

<img src="/images/logo.png" className={imgStyle} alt="Logo" />