Including an image file in framework app?

Community Help
1

I’m trying to deploy a custom icon for my leaflet visualization. I feel like I’m missing something - the file keeps getting a 404. I’ve tried moving it to /components, that didn’t help.

2

Only referenced files are included in the build output. How are you trying to use the image?

3

Passing it to Leaflet as a base for a map icon. Until I get this to work I’m just hosting it on another website, like below:

const ChargerIcon = L.Icon.extend({
      options: {
        iconSize:     [30, 30],
        iconAnchor:   [15, 25],
        popupAnchor:  [0, -25]
      }
    });
const chargerIcon = new ChargerIcon({iconUrl: "https://aircharg.wordpress.com/wp-content/uploads/2025/01/aircharge-charger.png"});

then later…

loc.Marker = L.marker([loc.lat, loc.lng], {icon: chargerIcon});
      loc.Marker.bindPopup(popupForCharger(loc));
      loc.Marker.addTo(map);

I tried FileAttachment, then passing that to leaflet

const mapMarker = FileAttachment("components/aircharge-charger.png")

then later using mapMarker.image(), but that was feeding the file object to leaflet, not the path to the actual file.

The app is here if its helpful:
https://aircharge.observablehq.cloud/aircharge/

4

Perhaps, you might try mapMarker.url()?

5

Thanks for the idea @mcmcclur !

I’m trying that here, like this:

const airchargeMarker = FileAttachment("components/aircharge.png").image();

then later,

const chargerIcon = new ChargerIcon({iconUrl: airchargeMarker.url()});

I see a type error airchargeMarker.url is not a function in the debug console in FireFox. If I take the .image() off, I instead see a 404 that [object Promise] cannot be found.

6

With a little more poking, airchargeMarker does have a property name which contains the filename (though not the path) - providing this to leaflet still gets a 404 (even if I move the file back out of components to the src app root)