技术求助：JS循环生成的图片无法在HTML中加载

我来帮你搞定这个问题！先从你给出的代码和描述来看，大概率是几个常见的小坑导致的，咱们一步步排查修复：

首先排查最明显的问题：URL不完整 #

你提供的第二个图片URL是截断的（末尾是...），浏览器根本无法识别这个不完整的地址，这肯定会加载失败。先把URL补全，比如这个圣彼得堡河流的正确URL应该是：
https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg

完整的解决方案代码 #

假设你的HTML里有一个用来放图片的容器，比如：

<div id="image-container"></div>

下面是两种可靠的JS实现方式，选一种你喜欢的就行：

方式1：逐一生成DOM元素（适合需要单独操作每个图片的场景） #

// 补全后的完整图片数组
const images = [
  {
    caption: "Red Slate Mountain",
    alt: "Mountain",
    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"
  },
  {
    caption: "St. Petersburg River",
    alt: "River",
    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"
  }
];

// 获取页面上的图片容器
const imageContainer = document.getElementById('image-container');

// 遍历数组生成图片和标题
images.forEach(image => {
  // 创建图片元素
  const img = document.createElement('img');
  img.src = image.url;
  img.alt = image.alt;
  img.style.margin = '0 10px 10px 0'; // 给图片加个间距，可选

  // 创建图片标题（可选，用来展示caption）
  const caption = document.createElement('figcaption');
  caption.textContent = image.caption;
  caption.style.textAlign = 'center'; // 标题居中，可选

  // 把图片和标题放进一个figure标签（语义化更友好）
  const figure = document.createElement('figure');
  figure.style.display = 'inline-block';
  figure.appendChild(img);
  figure.appendChild(caption);

  // 把整个figure添加到容器里
  imageContainer.appendChild(figure);
});

方式2：用innerHTML批量生成（更简洁，性能更好） #

如果不需要单独操作每个图片元素，这种方式更高效：

const images = [
  {
    caption: "Red Slate Mountain",
    alt: "Mountain",
    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"
  },
  {
    caption: "St. Petersburg River",
    alt: "River",
    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"
  }
];

const imageContainer = document.getElementById('image-container');

// 拼接HTML字符串
let imageHtml = '';
images.forEach(image => {
  imageHtml += `
    <figure style="display: inline-block; margin: 0 10px 10px 0;">
      <img src="${image.url}" alt="${image.alt}" width="320">
      <figcaption style="text-align: center;">${image.caption}</figcaption>
    </figure>
  `;
});

// 一次性插入到容器中
imageContainer.innerHTML = imageHtml;

额外排查点（如果还是加载失败） #

1. 检查循环变量作用域：如果你之前用的是for(var i = 0; i < images.length; i++)，旧版JS里var的函数作用域会导致所有图片都指向最后一个元素。换成forEach或者for(let i = 0; ...)就能解决。
2. 查看浏览器开发者工具：按F12打开DevTools，切换到Network面板，刷新页面看图片的请求状态：
   • 如果是404：说明URL还是有问题，再检查地址是否正确。
   • 如果是200但图片不显示：去Elements面板看img元素的src是否正确，或者有没有CSS样式把图片隐藏了。
3. 跨域问题：不过你用的是维基媒体的图片，它们允许跨域访问，所以这个基本可以排除，但如果是其他域名的图片，要确认对方服务器允许跨域请求。

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