JavaScript:给定一个图像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);