React中img标签src属性引用映射JSON内图片的正确语法是什么？

问题原因 #

你使用模板字符串拼接的`item.${data.slug}`属于普通字符串拼接逻辑，JavaScript不会将其解析为对item对象的属性访问操作，因此最终渲染出来的就是item.dwarf这类纯文本字符串，无法拿到对应的图片路径值。

解决方案 #

要通过动态变量读取对象的属性，需要使用JavaScript的方括号属性访问语法，直接把动态属性名放到item后的方括号内即可，不需要加引号也不需要拼接字符串。

修改后的代码示例 #

{images.map((item, index) => (
    <C.Image
        key={index}
        item={item}
    >
        <img src={item[data.slug]} alt={`${data.slug} icon`} />
    </C.Image>
))}

可选优化 #

如果要避免因属性不存在导致的裂图问题，可以加默认路径兜底：

<img src={item[data.slug] || '/assets/default-race.png'} alt={`${data.slug} icon`} />

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