JavaScript中如何访问对象数组？图片src取值失败求助

首先，thumbnail是数组，不是单个对象，你之前的写法都没正确访问数组元素：

1. 展示单张图片（比如取第一个元素） #

数组元素要用[]索引访问，正确写法是：

<img src={thumbnail[0].url} alt="缩略图" />

你之前写的thumbnail.0.url是错误的，数组索引必须用方括号[]。

2. 遍历展示所有图片 #

如果要展示数组里的所有图片，用map遍历：

{thumbnail.map((item, index) => (
  <img key={index} src={item.url} alt={`缩略图${index + 1}`} />
))}

注意要给每个img加唯一的key属性，React要求列表元素必须有key。

错误写法分析 #

• thumbnail.url：直接访问数组的url属性，数组本身没有这个属性，所以拿到undefined
• thumbnail.0.url：语法错误，数组索引不能用点加数字的方式
• thumbnail"[url]"：完全不符合JS语法，会报错

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