当我将我的 react 应用程序部署到 gh-pages 时，为什么我会丢失我的图像？

Question

我的反应站点部署在 gh-pages 上： https://efraimkrug.github.io/nehiezra/

当我使用 firefox 来“检查未显示的（2）张图片的元素”时，它向我显示了目录（没有基础）。

如果我“复制链接”并将其放在另一个浏览器选项卡中 - 副本也抓住了基地，我看到了图片！

如果你知道我可以找到更多关于 react 和 gh-pages 如何处理它们的链接和基本目录结构的信息的地方，我将非常感激。

谢谢。

Answer 1

我相信你已经自己硬编码了图像路径。 尝试使用以下路径进行快速解决。

images/RebNehemiaSmall.jpeg

或者，理想情况下，您可以将图像放在 src 文件夹中的某个位置，导入组件，然后使用img标签的src属性中的引用，如下所示。

import myImage from './../somepath/RebNehemiaSmall.jpeg';
...
...
<img src={myImage} alt="My Image" />

另外，不要错过设置文档库 url 因为您要部署到子目录。 如果您对此一无所知，请检查此内容。