在React中如何拼接字符串与变量得到对应导入图片的变量名？

问题本质 #

静态导入的ES Module变量无法通过字符串拼接的方式动态引用，你拼接得到的'img1'只是普通字符串，和导入的img1变量没有关联，自然无法正确拿到图片资源地址。

注意：不要尝试用window['img' + num]这类方式从全局作用域取变量，不仅会污染全局环境，在模块化环境下也不一定能生效，属于不规范的实现方式。

解决方案1：数组存储导入资源（推荐） #

将所有导入的图片提前存入数组，通过数组下标匹配对应序号的图片即可：

import img1 from 'img1.jpg'
import img2 from 'img2.jpg'
import img3 from 'img3.jpg'
import { useState } from 'react'

// 把所有导入的图片按顺序存入数组
const imgList = [img1, img2, img3]

function ImgSwitcher() {
  const [num, setNum] = useState(1)

  function handleNextClick() {
    // 可选添加边界判断，超过总张数后回到第一张
    const nextNum = num >= imgList.length ? 1 : num + 1
    setNum(nextNum)
  }

  return (
    <div>
      {/* 数组下标从0开始，所以序号要减1 */}
      <img src={imgList[num - 1]} alt="" />
      <button onClick={handleNextClick}>切换下一张</button>
    </div>
  )
}

解决方案2：对象映射匹配 #

如果不想处理下标减1的逻辑，可以用对象建立序号和图片的映射关系：

// 建立序号到导入变量的映射
const imgMap = {
  1: img1,
  2: img2,
  3: img3
}

// 取值时直接用num作为key即可
<img src={imgMap[num]} alt="" />

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