React项目中图片无法加载的问题求助（含路径排查与代码细节）

别担心，新手遇到路径和资源加载问题太正常了！我来帮你一步步排查解决：

1. 先确认正确的导入路径 #

根据你的项目结构：

src
├── components
│   └── Intro
│       └── Intro.jsx
└── img
    └── github.png

从Intro.jsx出发，要回到src目录再进入img文件夹，正确的相对路径应该是：

import Github from '../../img/github.png'

（解释：../代表上一级目录，第一个../从Intro文件夹跳转到components，第二个../从components跳转到src，最后/img/github.png定位到目标文件）

2. 修正JSX中img标签的写法 #

你现在的代码里写了：

<img src="{Github}" alt="" />

这里犯了一个典型的小错误：JSX中使用变量作为属性值时，不需要额外加引号，直接用花括号包裹变量名即可。正确写法是：

<img src={Github} alt="GitHub icon" />

另外建议给alt属性添加有意义的文本，这对网页可访问性很重要～

3. 检查图片文件的细节 #

• 确认src/img/文件夹下确实存在github.png文件，别打错文件名（注意大小写！比如Github.png和github.png在Mac/Linux系统下是完全不同的文件）
• 可以右键打开图片，确认文件没有损坏

4. 备选方案：使用public文件夹的绝对路径 #

如果还是有问题，你可以把img文件夹放到项目根目录的public文件夹下，然后直接用绝对路径引用，不需要导入：

<img src="/img/github.png" alt="GitHub icon" />

这种方式适合不需要webpack处理的静态资源，Create React App会自动识别public下的文件路径。

按照上面的步骤调整后，应该就能正常显示图片啦！

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