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

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

我的React网站部署在gh页上： https://efraimkrug.github.io/nehiezra/

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

如果我“复制链接”并将其放在另一个 浏览器标签-副本也同时获取基本和 我看到图片了！

如果您知道我可以找到更多地方的地方 有关如何反应和gh-pages的信息 它们的链接和基本目录结构， 我非常感谢。

谢谢。

解决方法

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

images/RebNehemiaSmall.jpeg

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

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

此外，由于要部署到子目录，因此不要错过设置文档基本URL的权限。 如果您不知道，请检查this。