将反应项目部署到 github 页面面临公共文件夹中图像的问题

Posted 2023-02-25

【中文标题】将反应项目部署到 github 页面面临公共文件夹中图像的问题

【英文标题】：Deploying react project to github pages face problem for image in public folder

【发布时间】：2021-11-23 12:15:03

【问题描述】：

我在 Github 上部署我的 react js 项目时遇到了麻烦。

简而言之，html 文件中的 javascript 运行良好，但我放在公共文件夹中的所有图像和 PDF 文件似乎都未被服务器读取。这些图像和 PDF 文件存在于 BUILD 文件夹中，但无法在页面上显示。控制台中每个图像的错误消息是：

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

你们怀疑可能是什么问题？是不是因为我直接用<img src="/barbell.svg">引用了那些图片，所以部署后它们无法匹配图片文件名？

Image and PDF in BUILD folder

Github page and error message in the console

【参考方案1】：

如果您的图片位于公共文件夹中，请尝试使用<img src=process.env.PUBLIC_URL + "/barbell.svg">。

【讨论】：

天哪，成功了！你能告诉我更多关于为什么它应该这样表达吗？非常感谢你！！！！

public 文件夹包含 Webpack 不接触的静态文件，因此它不是构建的一部分，生产构建只包含这些文件的直接副本。因此，您需要使用process.env.PUBLIC_URL 进行部署。但是，最好不要将图像存储在公用文件夹中，您可以在create-react-app.dev/docs/using-the-public-folder查看更多信息