React中如何为导入的图片使用动态名称？

你之前的写法失效，是因为Image${item.id}只是生成了字符串"Image1001"，而非你导入的对应图片资源变量——webpack打包时会把import Image1001 from '../images/1001.jpg'里的图片处理成实际资源路径，但纯字符串不会被解析为资源，所以src变成纯文本，自然加载失败。

下面是几种可行的实现方式：

方法1：手动建立图片映射对象 #

先逐个导入需要的图片，用对象关联ID与对应图片资源，之后通过ID直接取值：

// 导入目标图片
import Image1001 from '../images/1001.jpg';
import Image1002 from '../images/1002.jpg';

// 建立ID到图片的映射关系
const imageMap = {
  1001: Image1001,
  1002: Image1002
};

// 在map函数中使用
{itemList.map(item => (
  <img key={item.id} src={imageMap[item.id]} alt="" />
))}

方法2：用webpack的require.context批量导入图片 #

如果图片数量多，不想手动逐个导入，可借助webpack的require.context批量读取指定目录下的图片，自动生成映射：

// 创建图片上下文：指定图片目录、是否递归子目录、匹配jpg格式文件
const imageContext = require.context('../images', false, /\.jpg$/);

// 生成ID到图片资源的映射
const imageMap = {};
imageContext.keys().forEach(key => {
  // 从文件名提取ID，例如将'./1001.jpg'处理为'1001'
  const imageId = key.replace('./', '').replace('.jpg', '');
  imageMap[imageId] = imageContext(key);
});

// 在map函数中使用
{itemList.map(item => (
  <img key={item.id} src={imageMap[item.id]} alt="" />
))}

方法3：直接动态拼接路径（webpack环境适用） #

通过require直接动态拼接图片路径，webpack会自动解析符合规则的动态路径：

// 在map函数中直接用require加载图片
{itemList.map(item => (
  <img key={item.id} src={require(`../images/${item.id}.jpg`)} alt="" />
))}

注意：使用这种方式时，webpack需要识别你的动态路径规则，尽量保持../images/为固定前缀，仅ID部分为动态内容。

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