React中如何对img标签的src属性进行字符串插值？

正确插值写法 #

在JSX语法中，属性绑定动态值需要用{}包裹表达式，你可以通过以下两种方式实现路径拼接：

• 方式1：使用ES6模板字符串（更推荐，可读性更高）

{itemData.map((item) => (
  <ImageListItem key={item.img}>
    <img            
      src={`images/${item.src}`}
      alt={item.title}
    />
  </ImageListItem>
))}

• 方式2：使用加号运算符拼接字符串

<img            
  src={"images/" + item.src}
  alt={item.title}
/>

原写法问题说明 #

你之前尝试的src="images/{item.src}"写法不生效，是因为JSX不会解析引号内部的{}为动态表达式占位符，只有放在属性赋值位、脱离字符串引号的{}才会被识别为JS表达式入口。

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