我将图像保存在文件夹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
我在这里想念什么?
答案 0 :(得分:0)
好的,所以我以某种方式解决了我的问题,但是,我对解决方案并不满意:
解决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
。
对于任何更好的解决方案,我将不胜感激!