有些图像即使存在也不会加载到react应用程序中

Question

我正在开发一个react应用程序。在开发过程中，一切工作正常。当我使用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" />