如果图像有效，则仅 append 文档使用 jquery

Question

I have an array of image urls that I need to add to a document (shown below). Some of the urls do not contain images. How do I check this?

picUrls = ["https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg","http://www.fakeurl.io/fakeimage1.jpeg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg"]

I am using jquery and have tried the.load &.error

for(let i = 0; i < picUrls.length; i++) {
    const picUrl = picUrls[i];

    //create image to preload:
    var imgPreload = new Image();
    $(imgPreload).attr({
      src: picUrl
    });
    
    //check if the image is already loaded (cached):
    if (imgPreload.complete || imgPreload.readyState === 4) {
    
      //image loaded:
      //your code here to insert image into page
      $('#content-container').append(imgPreload);
    
    } else {
      //go fetch the image:
      $(imgPreload).load(function (response, status, xhr) {
        if (status == 'error') {
    
          //image could not be loaded:
          console.log('error');
        } else {
    
          //image loaded:
          //your code here to insert image into page
          $('#content-container').append(imgPreload);
    
        }
      });

Answer 1

You can create a helper function that returns a promise whether an image is a valid image or not

      const picUrls = [
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg',
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg',
        'http://www.fakeurl.io/fakeimage1.jpeg',
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg',
      ];

      const getOnlyValidImage = src =>
        new Promise((resolve, reject) => {
          const img = new Image();
          img.src = src;
          img.onload = () => resolve(img);
          img.onerror = () => resolve(null);
        });

      const preloadImages = async () => {
        for (let i = 0; i < picUrls.length; i++) {
          const picUrl = picUrls[i];
          const image = await getOnlyValidImage(picUrl)
          if (image) {
            $('#content-container').append(image);
          }
        }
      };

      preloadImages();