React项目通过JSON内的相对文件路径加载图片失败如何解决？

问题根因 #

React的构建工具（Webpack/Vite等）仅会处理两类本地静态资源：代码中显式import引入的资源、存放在public目录下的资源。你写在JSON中的相对路径属于动态拼接的资源路径，构建阶段不会被工具解析转换，因此浏览器加载时无法匹配到打包后的资源地址，就会出现图片损坏的情况。你替换为网络URL可以正常加载，是因为网络URL为完整可访问地址，不需要本地路径解析。

解决方案 #

方案1：将图片存放在public目录（最省事） #

• 把项目中的images文件夹整体移动到项目根目录的public文件夹下
• 修改JSON文件中的图片路径，去掉相对路径前缀，直接写以/开头的绝对路径：

"image": "/images/pen.svg"

• 原有业务代码无需修改，直接使用src={item.image}即可正常加载图片。

方案2：动态引入图片资源（适合资源放在src目录的场景） #

• 修改JSON中的图片字段，仅保留文件名：

"image": "pen.svg"

• 调整img标签的src写法，按你当前组件到images文件夹的相对路径，用require动态引入（Webpack/CRA环境适用）：

<img
  src={require(`../images/${item.image}`)}
  className="services-item-img"
/>

• 如果你用的是Vite环境，换用import.meta.glob提前批量引入所有图片，再做路径映射即可。

你代码中单独引入的Diamonds图片可以正常显示，就是因为你是显式import引入的，构建工具已经完成了路径解析处理。

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