React无法显示从JSON加载的本地图片问题求助

问题回顾 #

使用Create React App开发时，通过JSON文件中的图片路径加载public/Images目录下的本地图片，仅显示图片边框，无法加载图片内容，文本内容可正常显示。

核心修复步骤 #

1. 修正img标签属性拼写错误

你的Trans1组件中，img标签的属性写成了scr，正确属性名为src，这是导致图片无法加载的直接原因：

// 错误写法
<img scr = {props.coinImage} width={250} height={250} alt ="" />

// 正确写法
<img src={props.coinImage} width={250} height={250} alt="加密货币图标" />

（建议给alt属性添加有意义的描述，提升页面可访问性）

2. 确认public目录结构与路径匹配

JSON中配置的路径/Images/eth.jpg对应以下目录结构，需确保大小写完全匹配（部分开发环境区分大小写）：

public/
└── Images/
    ├── eth.jpg
    └── uniswap.png

3. 正确使用require语法（可选）

若需通过require加载图片，需确保webpack能静态解析路径，不能直接传入动态变量。可调整JSON中的路径为文件名，再在组件中拼接路径：

• 修改JSON文件：

export const CryptoChain = [{
    // ...其他字段
    "coinImage": "eth.jpg",
    "exchangeImage": "uniswap.png"
}]

• 组件中使用require：

<img src={require(`../public/Images/${props.coinImage}`).default} width={250} height={250} alt="加密货币图标" />

4. 排查路径有效性

打开浏览器开发者工具（F12），切换到Network标签，查看图片请求的状态码：

• 若返回404，说明路径错误，检查文件夹名称、文件名是否与JSON中的路径一致；
• 若返回200仍不显示，检查图片文件是否损坏。

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