Prefetching images from AirTable in JavaScript using new Image()

So I have to prefetch images for an application with JavaScript in case the connection drops, the user should still be able to see the images. I’m prefetching a couple hundred images with this function:

// Function to preload a single image
          const preloadImage = (url: string) =>
            new Promise(resolve => {
              const img = new Image();
              img.src = url;
              img.onload = resolve;
              img.onerror = resolve; // Resolve even if an error occurs
            });

but when the app actually gets to displaying the image, it just disregards that I’ve already prefetched these images and tries to do it again and with no connection, it is of course broken.

I also tried batching the image reloads but that also does not work.

When I try only prefetching only one image, it works with some but does not with others.

When I don’t prefetch the images and just go to the section where the images are displayed with great internet connection, the images are shown without a problem so it’s not the url that’s broken.

I’m fetching the images from AirTable by the way, I don’t know if that makes a difference.