时间戳

首页 > 解决方案 > React JS无法渲染图像

reactjs - React JS无法渲染图像

问题描述

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

  1. 创建了简单的页面，一切都在我的本地机器上正常工作
  2. 推送到 GitHub 并将我的作品集发布到gh-pages（https://yanalinso.github.io/react-portfolio/）并且它有效！
  3. 我更换了电脑，并从我的存储库中克隆了相同的代码（https://github.com/yanalinso/react-portfolio）
  4. 在我的本地机器上运行npm install，npm start图像不再工作（徽标和背景图片），但 CSS 工作正常
  5. https://ibb.co/4NchQJG（我本地机器上的结果）
  6. https://ibb.co/RQVv6KB（Chrome控制台）
  7. https://ibb.co/ZGN1cPd（文件树，和我的其他机器一样）
  8. https://ibb.co/qmfwX44（cmd运行结果）
  9. 我的代码很容易使用图片
img src="img/logo1.png"

我仍然可以在 GitHub 页面上推送更改并且工作正常，尽管图像在我的本地计算机上不起作用。

标签： reactjs

解决方案

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

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

然后这个：

<img src={logo1} />

推荐阅读