React中通过数组传递src时图片无法加载的解决方法咨询

我明白你遇到的困扰了——直接在JSX里用src={require('images/img-1')}时webpack能正常解析图片，但把路径存在数据数组里再通过map渲染就失效了，这本质是webpack对require的路径解析有静态分析的要求。下面给你两种可行的解决方案：

方案一：在数据数组中直接嵌入require #

你可以把require直接写在CardData的src字段里，这样webpack在打包阶段就能提前解析图片路径：

export const CardData = [
  {
    src: require('../images/img-2.jpg'),
    text: 'Travel',
  },
]

之后渲染时直接使用item.src即可：

{CardData.map((item, index) => (
  <img src={item.src} key={index} alt={item.text} />
))}

方案二：动态拼接路径的require（适合路径需动态生成的场景） #

如果你的图片路径需要根据变量动态生成，要保证require里的路径有一部分是静态固定的，这样webpack能预扫描对应目录下的资源：

首先修改CardData，只存储图片文件名：

export const CardData = [
  {
    imgName: 'img-2.jpg',
    text: 'Travel',
  },
]

然后在渲染时静态拼接路径前缀：

{CardData.map((item, index) => (
  <img 
    src={require(`../images/${item.imgName}`)} 
    key={index} 
    alt={item.text} 
  />
))}

为什么之前的写法失效？ #

当你尝试src={require(item.src)}时，item.src是一个运行时变量，webpack在打包阶段无法预知它的具体值，因此没办法提前解析对应的图片资源，最终导致图片加载失败。而上面两种方案都保证了webpack能在打包时分析到静态的路径部分，从而正确处理图片资源。

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