JavaScript Image Caching from Airtable Not Working with new Image() Constructor

Other Questions Airtable
1

I’m working on a web app that needs to cache images locally so they stay visible when the internet connection goes down. I’m pulling hundreds of images from Airtable and trying to preload them using this code:

const cacheImageData = (imageUrl) => {
  return new Promise((done) => {
    const picture = new Image();
    picture.src = imageUrl;
    picture.addEventListener('load', done);
    picture.addEventListener('error', done);
  });
};

The weird thing is that when my app actually tries to show these images later, it acts like they were never cached at all. It tries to fetch them again from the network and fails when there’s no connection. I’ve tried grouping the preloading into smaller chunks but that doesn’t help either. Sometimes it works for a single image but fails for others, even though all the URLs are valid and work fine when I have good internet. Since I’m getting these images from Airtable, I’m wondering if their image hosting affects the caching somehow?

2

The Image constructor doesn’t work well with cross-origin content like Airtable’s CDN. I encountered the same issue—preloading images doesn’t guarantee they’ll stay cached as browsers handle external images differently than local ones. A solution I found effective was to implement a service worker to intercept network requests and serve cached responses during offline use. By setting up fetch event listeners, you can return cached image data when there’s no network connection, providing a more reliable offline experience. Service workers give you better control over your caching strategy.

3

I’ve hit this exact problem with image caching. Your code’s fine - the issue is browsers and CORS for external images. Airtable’s image URLs have CORS restrictions that break caching with the Image constructor. What fixed it for me: switch to fetch() with proper headers and store blob URLs instead. Fetch the image as a blob, create an object URL, then map your original URLs to these blob URLs for display. The actual image data gets stored locally instead of relying on browser cache policies. Just remember to revoke the object URLs when you’re done or you’ll get memory leaks. fetch() gives you way more control over caching than the Image constructor.

4

yeah, i’ve noticed that with airtable too. their images can expire which messes with caching. check your cache-control headers, they might have short expiry settings. better to save the actual image data in IndexedDB to be safe instead of relying on the browser cache.