React项目中导航栏Logo图片无法正常显示的问题求助

第一种方法的错误与修正 #

你把logo.png放在NavBar.jsx同目录时，内页图片破损的核心原因是没通过ES6 import正确导入图片，而是用了基于页面URL的相对路径：

• 首页http://localhost:9001/的相对路径能找到根目录下的图片，但内页http://localhost:9001/courseware/course/会去子目录找图片，自然找不到。

正确操作：

1. 在NavBar.jsx顶部添加导入语句：

import logo from './logo.png';

2. 保持img标签写法：

<img
  src={logo}
  width="30"
  height="30"
  alt="网站Logo"
/>

这种方式下Webpack会把图片处理成绝对路径，无论哪个页面都能正常加载。

第二种方法的错误与修正 #

你把图片移到public/images/logo.png后，代码里有两个明显错误：

1. 多余的import logo from "./logo.png"：这个语句是导入NavBar.jsx同目录的图片，但你已经把图片移到public文件夹了，这个导入会找不到文件；
2. 无需导入，直接用PUBLIC_URL指向public文件夹的资源即可：

<img
  src={`${process.env.PUBLIC_URL}/images/logo.png`}
  width="30"
  height="30"
  alt="网站Logo"
/>

另外确认文件夹结构是否正确：

public/
  images/
    logo.png
src/
  components/
    NavBar.jsx

如果路径没问题，重启一下开发服务器（环境变量可能需要重新加载），图片就能正常显示了。

内容的提问来源于stack exchange，提问作者Rnj