React中渲染数组对象内图片失败求助：图片无法显示

问题原因 #

React项目中，直接使用字符串路径引用src目录内的静态图片时，Webpack无法正确解析资源引用，导致图片加载失败。这类资源需要通过模块引入的方式让Webpack识别并处理。

具体解决方法 #

方法1：在Data文件中用require引入图片 #

修改你的Data.js文件，将图片路径改为require引入的形式，注意路径要与Data文件的位置相对应：

let Data = {
  portfolio: [
    {
      name: "picture1",
      discription: "First Model",
      status: "sold",
      img: require('./images/picture1.jpg'), // 路径需根据Data文件位置调整
      alt: "pr1",
    },
  ],
};

比如如果Data.js在src目录下，图片在src/images，则路径为./images/picture1.jpg；如果Data.js在src/data目录，路径则改为../images/picture1.jpg。

方法2：在Portfolio组件中动态引入图片 #

在渲染图片时，用require包裹图片路径，确保路径相对于Portfolio组件的位置正确：

<img src={require(`${item.img}`)} alt={item.alt}/>

同时调整Data文件中的img字段为相对路径，比如Portfolio组件在src/components，图片在src/images，则img字段应为../images/picture1.jpg。

方法3：将图片移至public目录 #

React默认会将public目录下的资源直接复制到构建产物的根目录，无需Webpack处理。把图片放到public/images下，Data文件中的img: '/images/picture1.jpg'就能直接生效。

额外检查项 #

• 确认图片文件名和路径的大小写是否正确（Linux/macOS系统区分文件名大小写）
• 检查图片文件是否确实存在于指定路径中，没有拼写错误

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