JavaScript:给定一个图像URL列表,如何显示第一个未损坏的图像？

在JavaScript中，要实现这个功能，可以使用以下步骤：

创建一个新的Image对象。
为Image对象添加一个load事件监听器。
在load事件监听器中，检查Image对象的width和height属性，以确定图像是否已成功加载。
如果图像已成功加载，将其显示在页面上。
如果图像未成功加载，尝试加载下一个URL。

以下是一个示例代码：

function displayFirstImage(imageUrls) {
  const img = new Image();
  let index = 0;

  img.addEventListener('load', () => {
    if (img.width > 0 && img.height > 0) {
      document.body.appendChild(img);
    } else {
      loadNextImage();
    }
  });

  img.addEventListener('error', () => {
    loadNextImage();
  });

  function loadNextImage() {
    if (index >= imageUrls.length) {
      return;
    }

    img.src = imageUrls[index];
    index++;
  }

  loadNextImage();
}

const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

displayFirstImage(imageUrls);

这个代码会尝试按照给定的URL列表顺序加载图像，直到找到第一个未损坏的图像并将其显示在页面上。如果所有图像都损坏，则不会显示任何图像。