How can I use the Fetch API to fetch images in JavaScript?

How can I use the Fetch API to fetch images in JavaScript?

You can use the Fetch API to retrieve images by making a GET request to the image URL. Here's a simple example:

Can you show me a code snippet for that?

Sure! Here's a basic example:

fetch('https://example.com/image.jpg')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(imageBlob => {
    const imageObjectURL = URL.createObjectURL(imageBlob);
    document.querySelector('img').src = imageObjectURL;
  })
  .catch(error => console.error('There was a problem with the fetch operation:', error));

What if I want to display multiple images?

You can loop through an array of image URLs and fetch each one. Here's an example:

const imageUrls = ['url1.jpg', 'url2.jpg', 'url3.jpg'];

imageUrls.forEach(url => {
  fetch(url)
    .then(response => response.blob())
    .then(imageBlob => {
      const imageObjectURL = URL.createObjectURL(imageBlob);
      const imgElement = document.createElement('img');
      imgElement.src = imageObjectURL;
      document.body.appendChild(imgElement);
    });
});