reactjs - 在 github 页面中反应 js local_image 加载

Question

这些是我的文件结构

https://i.stack.imgur.com/Malmb.png

在 src/app.js 中，我写道：

 <img src={'/photo/IMG_0509.jpg'} />

我知道它会从公用文件夹中获取图像。当我在本地主机上运行它时很好。但是当我将它推送到 github 和 gh-pages 时，使用：

“预部署”：“npm 运行构建”

“部署”：“gh-pages -d 构建”

页面加载成功，但图片路径错误。我怎样才能解决这个问题 ？我用谷歌搜索过，somepage 说我需要添加一个 process.env.PUBLIC_URL，但我找不到什么是“process.env.PUBLIC_URL”以及如何使用它。

标签： reactjs

Answer 1

process.env.PUBLIC_URL 只是该可公开访问的应用程序目录的简写。process.env 通常由节点注入，作为获取应用程序中可能需要的信息的有用方法。

在您的情况下，您可能会像这样使用它。

<img src={process.env.PUBLIC_URL + "/photo/IMG_0509.jpg"} />

查看这篇文章，它以一种简洁明了的方式对其进行了更多分解。