How do you reference images in js?

bud
1

image
image1798×1148 134 KB

Here are examples for blade & css, but I need an example for JS.

image
image928×198 19.9 KB

I have a function in js that gets the image src based on an index. This works fine in dev mode, but after the build the image filenames get hashed and my sources don’t match anymore.

Is there a correct way to reference images in bud?

2

Is it possible to import the whole folder as an array?

3

With vanilla JS you can use the Image class

Also Pixijs, Threejs or other WebGL stuff has its own loaders

4

I use this class already to make my images. Maybe my question isn’t clear. My actual problem is that the image sources are getting hashed by bud. So after building my js, my reference to the source isn’t correct anymore.

As temporary solution I moved the images outside of the theme folder. Now I can reference them by an absolute url.

5

I am not sure about your use case but I would just add image url inside HTML as data-image attribute or something like this and then read that from the JS code…
Would that work for you ?

6

That would be a good solution indeed. The @asset function will get the right source.