当我将我的 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，因为您正在部署到子目录。 如果您不知道，请查看this。