部署到 github 页面时不会加载图像

Posted 2023-02-23

【中文标题】部署到 github 页面时不会加载图像

【英文标题】：Images will not load when deploying to github pages

【发布时间】：2019-04-30 20:58:37

【问题描述】：

我正在使用 create-react-app 构建一个简单的 React 应用程序，但是，当我将项目部署到 github 页面时，图像不会加载，但是当我使用命令提示符部署应用程序时，它们加载得很好。

我对所有图像都收到此错误：

加载资源失败：服务器响应状态为404()

任何帮助将不胜感激。谢谢！

【参考方案1】：

即使这篇文章很旧，也可能会对其他 Web 开发人员或初学者有所帮助。 在 gh-pages 上快速解决此问题的方法是添加： $procces.env.PUBLIC_URL 在您的 Route、Link 或 img 标签的路径中，在您的链接之前。 例子： 路由路径中的主页：$process.env.PUBLIC_URL/ 主页链接：$process.env.PUBLIC_URL/home $process.env.PUBLIC_URL/img/image.png 我在 Web 开发课程中学到了这一点。

【讨论】：

是的，它只在开发中有效，但是如果你在 github 中部署你的项目，图像也不会被加载

【参考方案2】：

我今天也遇到了同样的问题。问题出在文件路径上。当您在 github 上部署项目时，它不在 http://localhost:3000 上，但 URL 是 http://YOUR_PROFILE.github.io 在 package.json 中将 create-react-app 部署到 GitHub Pages 时添加

"homepage":"http://YOUR_PROFILE.github.io/MY_APP/"

MY_APP 更改为您的存储库名称。请记住将文件构造为在公共目录中而不是在 src 中具有图像文件夹。图片的路径，而不是 './images/photo1.jpg' 或 '/images/photo1.jpg'

将路径更改为：'./MY_APP/images/photo1.jpg'

在我的情况下，它就像一个魅力。

【参考方案3】：

404 表示找不到图片。这可能是您必须更改文件路径。如果可以，请使用图像的绝对路径。这样你就可以确定它会起作用。否则，您必须通过更改路径来尝试它是否有效。例如，如果您的图像位于图像文件夹中。

试试

/images/image1.jpg

或

./images/image1.jpg

【讨论】：

一开始是这样的：assets/teatemples/eb.jpg，后来我改成了：../assets/teatemples/eb.jpg，在github页面上还是不行

跨度>

只用一个点试试。还有 /assets/teatemples/eb.jpg

我已经尝试了这两种解决方案，但似乎都没有工作。同样，如果我从 cmd 部署，它工作得很好，当我在 github 页面上部署时它不会加载图像。