React中如何通过字符串键调用从/assets/文件夹导入的SVG元素

你的问题核心在于：image${index}生成的是字符串文本（比如"image1"），但你需要的是之前导入的image1变量对应的资源路径——JS不会自动把字符串转换成同名变量，所以直接拼字符串肯定行不通。

这里给你两种简单可行的解决方案：

方案一：用对象建立字符串到SVG变量的映射 #

首先把所有导入的SVG放到一个对象里，用字符串作为键名，对应到导入的变量：

import image1 from "assets/images/image1.svg";
import image2 from "assets/images/image2.svg";

// 建立字符串键和SVG资源的映射
const imageAssets = {
  image1: image1,
  image2: image2
};

然后在循环里，通过对象的键来获取对应的资源路径：

{data.map((item, index) => (
  // 注意index从0开始，所以要+1对应image1、image2
  <img 
    key={index} 
    src={imageAssets[`image${index + 1}`]} 
    alt={`SVG image ${index + 1}`} 
  />
))}

方案二（更推荐）：让data数组直接包含图片键名 #

如果可以修改你的data数组，最好让每个元素自带对应的图片键，这样更直观也不容易出错：

// 假设你的data改成这样
const data = [
  { id: 1, imageKey: "image1" },
  { id: 2, imageKey: "image2" }
];

// 同样先建立映射对象
const imageAssets = {
  image1: image1,
  image2: image2
};

然后循环里直接用item的imageKey去取：

{data.map((item) => (
  <img 
    key={item.id} 
    src={imageAssets[item.imageKey]} 
    alt="SVG image" 
  />
))}

这样做的好处是不用依赖index的顺序，即使data顺序变化，图片也能正确对应。

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