使用自定义域名无法为 Github 页面（create-react-app）呈现图像

Question

我有一个使用 Github 页面托管的 React 应用程序。最初，按照此处编写的步骤进行操作：https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a 我只能看到一个空白页。在查看了其他 S/O 问题后，我意识到我必须编辑 index.html 文件，如本文所述：hosting gh-pages on custom domain, white empty page 这行得通，该网站现已启动：

https://www.mohaiminalaoun.com

但是，我也有一些未渲染的 svg 图像。

我的 index.html 文件：https://github.com/mohaiminalaoun/mohaimin/blob/gh-pages/index.html

控制台中的错误是：GET https://mohaiminalaoun.com/mohaimin/static/media/face.01df9ea9.svg 404 这是有道理的，因为那不应该是路径。

在 index.html 文件中，我尝试将路径从“/mohaimin/face.svg”更改为“/face.svg”，然后再次更改为“/static/media/face.svg”，然后甚至尝试直接给出href：https://mohaiminalaoun.com/static/media/face.01df9ea9.svg，但没有一个他们在部署的页面上工作。

我不确定如何/是否应该再次编辑 index.html 文件以修复 svg 图像。

更新：在已发布的域中，/static/js/face.svg 中的 svg 文件只有一行 module.exports = __webpack_public_path__ + "static/media/face.01df9ea9.svg"; 我猜这需要以某种方式进行更改，但还不知道怎么做。

Answer 1

您指向错误的位置。

将您的 src 从 /mohaimin/static/media/face.01df9ea9.svg 更改为 /static/media/face.01df9ea9.svg

编辑： 如果您想知道如何找到该位置。

https://github.com/mohaiminalaoun/mohaimin/tree/gh-pages

基本上，这是你的根。 文件夹外的任何内容都位于https://mohaiminalaoun.com/FILE。

例如：face.svg 在您的 gh-pages 中位于 https://mohaiminalaoun.com/face.svg。

Answer 2

问题是，正如更新中添加的那样，公共 url 是 mohaiminalaoun.github.io/mohaimin，并且 webpack 将 svg 文件构建为具有 module.exports = webpack_public_path + "static/media /face.01df9ea9.svg”作为唯一的内容。整个路径不存在，因为 CNAME 更改后，路径应该只是域名。

所以你只需要将 package.json 中的 homepage 变量从 mohaiminalaoun.github.io 更新为 mohaiminalaoun.com