# How do you reference images in js?

**URL:** https://discourse.roots.io/t/how-do-you-reference-images-in-js/24008
**Category:** bud
**Tags:** sage10
**Created:** 2022-10-04T16:20:06Z
**Posts:** 6

## Post 1 by @Sam_Ghyselinck — 2022-10-04T16:20:06Z

![image](https://discourse.roots.io/uploads/default/original/2X/8/88ec6e1d80c8027d4c9b5f2e75bfe7116e29e07c.png)  
Here are examples for blade & css, but I need an example for JS.

 ![image](https://discourse.roots.io/uploads/default/original/2X/c/c0ae7e7a984c2833f319936d399ff6361e89132b.png)  
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?

---

## Post 2 by @Sam_Ghyselinck — 2022-10-04T16:25:40Z

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

---

## Post 3 by @aitor — 2022-10-05T07:24:29Z

With vanilla JS you can use the Image class

> **[Image() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)**
>
> The Image()
> constructor creates a new HTMLImageElement instance. It is functionally
> equivalent to document.createElement('img').

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

> **[PixiJS API Documentation](https://pixijs.download/release/docs/PIXI.Loader.html)**
>
> Documentation for PixiJS library

---

## Post 4 by @Sam_Ghyselinck — 2022-10-05T08:59:33Z

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.

---

## Post 5 by @igor_sumonja — 2022-10-06T08:04:50Z

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 ?

---

## Post 6 by @Sam_Ghyselinck — 2022-10-07T13:42:52Z

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