React映射Sdata.js数据时网页图片无法渲染的解决方案

核心原因 #

两种图片引用方式的构建处理逻辑不同，导致遍历渲染的图片路径解析失败：

• 组件中servicebackground图片通过import语法引入，会被构建工具（Webpack/Vite）自动识别，打包时自动处理资源路径、文件哈希、压缩优化，因此可以正常渲染
• 写在Sdata.js中的字符串路径/images/service-image1.jpg不会被构建工具扫描处理，运行时会直接请求站点根目录下的对应文件，如果图片没有放在构建工具约定的静态资源公共目录，就会返回404，导致图片无法显示。

可落地解决方法 #

方案1：公共目录存放静态资源（适合批量固定路径引用） #

• 打开项目根目录下的public文件夹，在其中新建images子文件夹
• 将service-image1.jpg等需要遍历渲染的图片全部放入该public/images目录
• 原有Sdata中的路径写法不需要修改，构建后服务会直接从根路径映射该目录下的资源，图片即可正常加载

注意：该方案下的图片不会被构建工具做压缩、哈希命名处理，后续更新图片时需要手动处理缓存问题。

方案2：模块化导入图片（官方推荐写法） #

参考引入背景图的写法，直接在数据文件中导入图片资源，将导入后的变量赋值给图片字段，构建工具会自动完成所有路径处理：
修改Sdata.js代码如下：

// 按照Sdata.js文件相对于图片的位置，写对相对导入路径
import serviceImage1 from './images/service-image1.jpg';

const Sdata = [
  {
    dataImage: serviceImage1,
    title: "Hatha",
    des: "Lorem ipsum sit amet, consectetur  adipisicing...",
    span: "Monday 20:00 hs.",
  }
]

export default Sdata;

这种写法会自动适配开发、生产环境的路径，同时自动处理图片压缩、缓存哈希，是React项目管理本地静态资源的标准方式。

兜底排查步骤 #

如果调整后图片仍不显示，按以下顺序检查：

• 打开浏览器开发者工具，切换到「网络」面板，筛选「图片」类型，查看对应图片的请求状态码，如果是404，根据请求的路径调整图片存放位置或者导入的相对路径
• 检查图片文件名大小写是否和代码中完全一致，部分服务器环境对文件名大小写敏感，大小写不匹配会直接导致资源找不到
• 单独打开本地图片文件，确认文件本身没有损坏、可以正常预览

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