Skip to main content
Question

Embedding static images in interface extensions?

  • May 29, 2026
  • 1 reply
  • 30 views
T
Forum|alt.badge.img+10

This seems kind of basic, but for some reason I can’t figure it out. I’m using Leaflet for a map using interface extensions, and the marker icon pngs that are part of their dist (e.g., “marker-icon-2x.png”) won’t load. “That’s fine,” I say, “I’ll just copy them to the frontend folder as a workaround.”

But those won’t load either, so now I’m a bit confused. As far as I can tell, I can’t use import statements on pngs, because webpack isn’t a fan. It looks like they might be included in the bundle, but they’ve been given automated bundle names (“2b3e1faf89f94a483539.png”), which I know for certain React isn’t dynamically renaming to match in my js. Is there some expected practice in interface extensions or React as a whole for handling this?

1 reply

A
Forum|alt.badge.img+6
  • anthonyXRay
  • Participating Frequently
  • June 1, 2026

The renamed filenames like “2b3e1faf89f94a483539.png” are Webpack’s content-hashing at work. This is expected behavior.  It means you can’t reference those files by a hardcoded name.

The standard fix in React/Webpack projects is to import the image as a module rather than referencing it as a path string:

import markerIcon from ‘./marker-icon-2x.png’;

Webpack will then resolve the hashed filename at build time and inject the correct reference.  Whether Airtable’s extension build pipeline supports this fully is worth testing as some restricted environments strip or block binary asset imports.

If that won’t work the most reliable fallback is for Leaflet to specifically reference the icons via a CDN URL directly in your Leaflet config rather than bundling them locally:

L.Icon.Default.prototype.options.iconUrl = ‘https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png’;

This will sidestep the bundler entirely and is a common workaround for Leaflet in non-standard build environments.

Anthony at XRay
Terms & ConditionsAccessibility statement