使用JS Fetch API获取三张图片仅能渲染一张的问题求助

核心问题 #

1. 元素选择错误：你用document.querySelector(".someImage")只选中了第一个<img>元素，循环里每次都给这同一个元素替换src，最后自然只剩最后一张图（kiwi.jpg）显示，前面的都被覆盖了。
2. 变量未声明：myRequest、myBlob、objectURL这些变量没加let/const，会变成全局变量，容易引发意外问题。
3. HTML标签错误：第一个<img>的src属性写法不完整（src后面缺等于号和引号），后两个<img>没有可被JS定位的标识（比如类名、id）。

修正后的代码 #

HTML部分

<!-- apple.jpg -->
<img class="fruit-img" alt="apple" />
<!-- banana.jpg -->
<img class="fruit-img" alt="banana" />
<!-- kiwi.jpg -->
<img class="fruit-img" alt="kiwi" />

JS部分

// 选中所有图片元素
const imgElements = document.querySelectorAll(".fruit-img");
const imgNames = ["apple.jpg", "banana.jpg", "kiwi.jpg"];

imgElements.forEach((img, index) => {
  // 确保索引对应，避免数组越界
  if (index >= imgNames.length) return;
  
  const imgUrl = imgNames[index];
  fetch(imgUrl)
    .then(response => response.blob())
    .then(blob => {
      const objectURL = URL.createObjectURL(blob);
      img.src = objectURL;
      // 图片加载完成后再释放URL，避免加载失败
      img.onload = () => {
        URL.revokeObjectURL(objectURL);
      };
    })
    .catch(err => console.error("加载图片失败：", err));
});

CSS部分（保持不变即可）

img {
  display: inline;
}

关键概念补充 #

• querySelector vs querySelectorAll：前者只返回匹配的第一个元素，后者返回所有匹配元素的NodeList，需要遍历处理每个元素。
• 变量作用域：必须用let/const声明变量，避免全局污染，保证每个循环迭代的变量独立。
• Object URL生命周期：URL.createObjectURL创建的URL需要在资源使用完成后（比如图片加载完成）再调用revokeObjectURL释放，否则可能导致资源无法正常加载。

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