Importing npm package images

help
1

I am using npm packages leaflet@1.0.0 and leaflet-draw

import 'lealfet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';

var map = L.map('mapcanvas', {
  drawControl: true
}).setView([500, 500], 0)

My problem is that the icons for the buttons don’t show up.

the CSS for the button says

background-image: url(images/spritesheet.png);

How do I load the images?

2 Likes
2

Great question. I’m running into the same issue. As far as I can tell, no answer yet:

Longer discussion here: https://github.com/meteor/meteor/issues/6846

3

I just ran into this too. Seems the only work-around still is to copy the NPM package’s CSS to a folder in your project where it is loaded, then update the paths to the images in the CSS to your public folder where you can place the images.

EDIT:

Actually, it’s easier just to add the few lines in my app’s CSS file with !important that override the NPM packages CSS lines that load the images with the paths to the public folder. Then you can just import the NPM packages CSS as normal. This is a lot cleaner and requires less maintenance in the future.