React.js中如何动态设置已导入图片资源的img标签src属性

问题根因 #

你直接拼接得到的Image${变量}是普通字符串，和你提前import导入的图片变量属于完全不同的类型，JS解析时不会把字符串自动匹配为同名的导入变量，因此无法生效。

方案1：手动构造映射对象（最稳妥，兼容性最好） #

把所有提前导入的图片存入一个键值对对象，用动态变量作为key取值即可：

// 先导入图片
import Image1 from './assets/image1.png';
import Image2 from './assets/image2.png';

// 构造映射表，key可以按你的业务需求定义为数字、字符串等
const imageMap = {
  1: Image1,
  2: Image2
}

// JSX中使用，假设你的动态变量是id，取值为1/2
<img src={imageMap[id]} alt={`image${id}`}/>

该方案适合图片数量较少、新增频率低的场景，类型安全，不会出现构建工具兼容问题。

方案2：动态导入路径（适合图片数量多的场景） #

如果不想手动写大量import语句，可以直接根据路径动态加载，不同构建工具写法略有区别：

webpack环境 #

直接使用require拼接路径即可：

// 直接在JSX中使用，id为动态变量
<img src={require(`./assets/image${id}.png`)} alt={`image${id}`}/>

Vite环境 #

需要用URL构造器处理路径：

<img src={new URL(`./assets/image${id}.png`, import.meta.url).href} alt={`image${id}`}/>

注意：使用该方案时需要确保动态变量对应的图片路径真实存在，建议添加兜底逻辑，比如路径不存在时显示默认占位图。

方案3：批量自动生成映射表 #

如果图片数量极多，也可以用构建工具的批量导入能力自动生成映射表，无需手动维护import语句：

Vite环境示例 #

// 批量导入assets目录下所有png图片
const images = import.meta.glob('./assets/*.png', {eager: true})

// 生成映射表，key为图片文件名（不含后缀）
const imageMap = Object.fromEntries(
  Object.entries(images).map(([path, module]) => {
    const fileName = path.split('/').pop().replace('.png', '')
    return [fileName, module.default]
  })
)

// 使用，比如动态变量是image1、image2
<img src={imageMap[`image${id}`]} alt={`image${id}`}/>

webpack环境示例 #

// 批量导入assets目录下所有png图片
const context = require.context('./assets', false, /\.png$/)
const imageMap = {}
context.keys().forEach(path => {
  const fileName = path.replace('./', '').replace('.png', '')
  imageMap[fileName] = context(path)
})

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