React应用导入图片后仅显示带alt文本的破损图标如何解决

开发者阿泽

2026-11-1

图片无法渲染的核心原因

核心问题为资源引用路径错误：常规React（CRA脚手架）项目的App.js存放在src/根目录下，你代码中写的require('../src/images/image.jpg')是冗余且易出错的相对路径：该路径会从App.js位置向上跳转一级到达项目根目录，再向下查找src/images/image.jpg。这类绕路的路径写法，很容易导致构建工具在生产环境下计算资源映射关系时出现偏差，且这类路径错误很多时候不会触发编译阶段的报错，最终运行时就会显示带alt文本的破损图标。

具体修正方案

修正资源引用路径
把代码中原来的错误img标签：

<div><img src={require('../src/images/image.jpg')} alt="profile_picture" /></div>

替换为和文件位置匹配的短相对路径：

<div><img src={require('./images/image.jpg')} alt="profile_picture" /></div>

推荐使用ES Module引入方式（更易排查问题）
不再在标签内部写require语句，直接在App.js顶部引入图片资源：
```
import React from "react";
// 新增图片引入语句
import profileImg from './images/image.jpg'
```
再将img标签的src属性绑定为引入的变量即可：
```
<div><img src={profileImg} alt="profile_picture" /></div>
```
这种写法下，webpack会在编译阶段直接校验图片资源是否存在，一旦路径错误会直接抛出明确的编译报错，不会等到运行时才显示无提示的破损图。
额外排查项
- 确认src/images/目录下的image.jpg文件名大小写和代码中书写的完全一致（Linux生产构建环境下文件路径大小写敏感，比如Image.jpg和image.jpg会被识别为两个不同文件）
- 确认图片文件本身没有损坏，文件后缀格式和实际内容匹配，避免出现把png文件改后缀为jpg的情况。