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

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="..." />

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

任何帮助将不胜感激。

谢谢。

标签： javascriptreactjsimagereact-native

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";