Download multiple images from array of URLs

Question

I want to download all images from array of urls, with the function below. But sometimes even if download starts, the file on i try to open is empty. The files will be stored on AWS, right now i'm only trying local testing.

const pictureSelected = [
    "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg",
    "https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHJhbmRvbXxlbnwwfHwwfHw%3D&w=1000&q=80",
  ];

const handleDownload = () => {
    pictureSelected.forEach(async (url) => {
      const image = await fetch(url, {
        mode: "no-cors",
      });
      const imageBlog = await image.blob();
      const imageURL = URL.createObjectURL(imageBlog);
      const link = document.createElement("a");
      link.href = imageURL;
      link.download = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };

Getting one picture only, and not even able to open it

Answer 1

Are you sure your source is not using cors? Instead of {mode: 'no-cors'} try using {mode: 'cors'}