React JS无法渲染图像答案

【问题标题】：React JS Unable to render imageReact JS无法渲染图像
【发布时间】：2020-10-06 05:35:29
【问题描述】：

我使用 npx create-react-app react-portfolio 创建了一个简单的 React 应用程序

创建了简单的页面，在我的本地机器上一切正常
已推送到 GitHub 并将我的作品集发布到 gh-pages (https://yanalinso.github.io/react-portfolio/) 并且成功了！
我更换了 PC，并从我的存储库中克隆了相同的代码 (https://github.com/yanalinso/react-portfolio)
在我的本地计算机上运行 npm install 和 npm start，图像不再工作（徽标和背景图片），但 CSS 工作正常
https://ibb.co/4NchQJG（我的本地机器上的结果）
https://ibb.co/RQVv6KB（Chrome 控制台）
https://ibb.co/ZGN1cPd（文件树，和我的其他机器一样）
https://ibb.co/qmfwX44（cmd运行结果）
我的代码使用图片很简单

img src="img/logo1.png"

我仍然可以在 GitHub 页面上推送更改，并且运行良好，虽然图像在我的本地机器上不起作用。

【问题讨论】：

你指的是什么图片？
对不起，我指的是徽标图像和页面背景
虽然imgur.com/aVp7Ga8对我来说工作正常
hmm，我似乎无法让它在我的机器上运行 1. git init 2. git clone github.com/yanalinso/react-portfolio 3. npm install 4. npm start 5.cleared browser cache
不确定它是什么，但您提供的是已启动并正在运行的 github-pages。您应该提供发生错误的页面

标签： reactjs

【解决方案1】：

你需要先像这样导入它，告诉 webpack JS 文件正在使用这个图像

import logo1 from './img/logo1.png';

然后是这个：

<img src={logo1} />

【讨论】：

我已经尝试过向我显示此消息 ./src/HeaderPage.js Module not found: Can't resolve './img/logo1.png' in 'C:\Users\Ayan \Documents\Mirai\React\Deployment\react-portfolio\src'
将图片文件夹放入 src 文件夹。如果你这样做，路径将是 ''../img/logo1.png';'如果您不想这样做，您可以使用本指南作为参考公用文件夹create-react-app.dev/docs/using-the-public-folder
我明白了，如果我不能解决这个问题，我会尝试你的建议谢谢:)

【解决方案2】：

我尝试换成其他图片还是失败了，

解决方案！

我已将 package.json 恢复为默认值，因此我已删除脚本上 gh-page 的配置并删除了主页 == 它可以工作！！

谢谢大家帮忙:)

【讨论】：