javascript - 即使某些图像存在，也不会在 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， Assets 还需要在src内提供。您还应该使用相对路径而不是绝对路径引用图像。例如:

图像位于src/assets/img/faces

下

您的代码位于src/some-folder/your-code.js

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