GitHub Pages上的React应用-URL缺少存储库名称

Question

我将图像保存在文件夹public/assets/img中。然后在类似这样的组件中使用它：

const imageUrl = "/assets/img/image.png"

在本地一切正常，但是在图像URL中的GitHub Pages上，我的存储库的名称以某种方式丢失了，所以代替了

http://name.github.io/my-repo/assets/img/image.png我得到http://name.github.io/assets/img/image.png

我正在遵循有关如何创建GitHub Pages构建的说明，并在package.json中添加了我项目的URL，即"homepage": "https://name.github.io/my-repo"

-编辑-

此外，我刚刚意识到，尽管路由似乎可以正常工作，但它也丢失了URL中的存储库名称，所以代替了

http://name.github.io/my-repo/subpage有

http://name.github.io/subpage

我在这里想念什么？

Answer 1

好的，所以我以某种方式解决了我的问题，但是，我对解决方案并不满意：

解决URL问题（URL中缺少回购名称）

我已将basename属性添加到路由器<BrowserRouter basename="/repo-name">

缺点：首先，它看起来不太好硬编码。其次，npm start打开localhost:3000，现在它是空的。我必须添加我的仓库名称才能在本地打开应用程序，所以localhost:3000/repo-name-不太整齐。

修复图像问题（URL中也缺少回购名称，因此不显示图像）

我已将一个process.env.PUBLIC_URL变量添加到图像URL：const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png。在本地环境中，它是空的，部署后它从homepage中获取package.json的{​​{1}}值

缺点：必须在组件中显示的每个图像之前添加https://name.github.io/repo-name。

对于任何更好的解决方案，我将不胜感激！