Mapbox-gl-js: Does map.loadImage() support local file paths?

[courlu]

mapbox-gl-js version: latest

Question

I'm trying to load a .png image from a local path instead of a http url. Is this supported?
It's not very clear from the documentation, and I can't seem to get it to work.

I've tried both absolute and relative file paths, with and without the file:// protocol and nothing seems to work. Replacing the path with a web http path works as expected.

For example, should this work?

    map.loadImage(`file://../images/myImage.png`, (error,image) => { ... } )

And related side question:
Can I retrieve an image from my spritesheet for use outside of the map? e.g. I want to display a symbol on a custom legend, which has been loaded in from SVG into mapbox studio

[mourner]

In the browser, no, this is technically impossible because of browser's security restrictions. If you're doing this simply for testing, you can use a simple static web server to make it work.

For the spritesheet image — not through a public method, but as a workaround you can get it currently in raw form that can be rendered on a Canvas. map.style.imageManager.getImage(id)

[charleneedwardson]

import myImage from '../images/myImage.png';

map.loadImage(myImage, (error, image) => {
if (error) throw error;
map.addImage('image-name', image);
});

[VaidasDatenis]

Can someone provide this is Angular 7+ ?
@charleneedwardson solution doesn't work..

[leonardas103]

Can someone provide this is Angular 7+ ?
@charleneedwardson solution doesn't work..

Check your image path, else, maybe you are trying to load an SVG image?
In that case use map.addImage with an HTMLImageElement:

import Cat from '../images/cat.svg';

const image = new Image(35, 35);
image.src = Cat;
map.addImage('cat-name', image);

[gongzemin]

const image = new Image(35, 35);
image.src = Cat;
map.addImage('cat-name', image);

svg seems doesn't support add class, image.className = 'filter-green'
.filter-green {
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
wouldn't change the color of image. It seems mapboxGl change svg to png, so add class wouldn't work.
Am i right?