How to load image from extension

[wss29]

Hi,
I create an extension and put an image in the style folder

now I want to load the image harry-botter.png in my component, so I create a variable to store it

const use1 = './style/harry-botter.png';

but when I use it I can not get the image.

A simple method is to put harry-botter.png into the image folder and copy the image folder to lib/fronted.

const user = './images/harry-botter.png';

but I want to ensure, could not I access harry-botter.png in my style folder if not use the image folder ?

[msujew]

Hey @wss29,

the way we usually do this is by embedding the image in css:

.harry-botter {
  background-image: url("./harry-botter.png")
}

The path of the image file needs to be relative to the css file. Then you just need to add the class name to the rendered html element for it to render the image.

[wss29]

hi @msujew
use css is also a method, but sometimes I use a third-party component, which needs a URL string, not CSS. I think loading images should be a simple thing, but it seems no easy now,

[msujew]

Aside from the CSS solution, you can always adjust the webpack config file and copy the files you want to include to the lib/frontend directory. We do a bunch of copying in there ourselves.