React中如何将状态变量传入map渲染对象的img src属性？

问题出在你访问对象属性的方式上：item.urls.imageSize 是在尝试访问 urls 对象里**名为"imageSize"**的属性，而不是使用状态变量imageSize的值作为属性名。

要实现根据状态变量动态获取对应尺寸的图片地址，需要用方括号属性访问语法，把变量放在方括号里：

{searchImages.map(item => (
    <img className='image-item' key={item.id} src={item.urls[imageSize]} alt='cool'/>
))}

补充说明 #

假设你的item.urls结构类似这样：

{
  regular: "https://example.com/regular.jpg",
  small: "https://example.com/small.jpg",
  large: "https://example.com/large.jpg"
}

当imageSize状态为"regular"时，item.urls[imageSize]就等价于item.urls.regular，就能正确拿到对应尺寸的图片地址了。

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