React中如何根据组件ID匹配assets对应图片设置img标签src属性

• 图片文件命名规则：image1.jpg、image2.jpg、image3.jpg……image9.jpg
• 已完成图片索引配置，通过语句import IMAGES from "../assets/imageIndex";将图片集导入组件
• 实现目标：根据图片文件名末尾的数字，匹配和组件ID对应的图片，赋值给<img>标签的src属性，实现指定ID的组件加载对应编号图片的效果
• 已尝试的无效方案：
  • 方案1：直接在src属性中传入箭头函数拼接"IMAGES.image"和id字符串，运行后控制台抛出警告：Warning: Invalid value for prop src on <img> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
  • 方案2：单独定义selectImage函数返回拼接的`IMAGES.image${id}`字符串，再将返回值传给src属性，逻辑仍不正确，无法实现预期加载效果

• 方案1问题：<img>标签的src属性仅支持接收字符串、数值类型的有效值，直接传入箭头函数属于传入函数类型，不符合属性值类型要求，因此触发无效属性警告
• 方案2问题：手动拼接得到的IMAGES.imageX是普通文本字符串，不是导入的图片资源对象引用，构建工具无法识别该字符串对应本地资源路径，因此图片加载失败

通过对象方括号动态取值语法，直接从导入的IMAGES对象中读取对应id的图片资源引用，禁止手动拼接字符串形式的对象访问路径。

• 内联写法（直接在标签内使用）：

<img src={IMAGES[`image${id}`]} alt={`id${id}对应图片`} />

• 封装函数写法：

// 定义图片匹配函数
const getImageById = (componentId) => {
  return IMAGES[`image${componentId}`]
}

// 标签内调用
<img src={getImageById(id)} alt="展示图片" />

前置校验：确认imageIndex文件的导出结构，保证IMAGES对象下存在image1到image9的属性，且属性值为对应导入的图片资源，动态拼接的属性名和对象内实际属性名完全一致即可正常加载。

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