How to work with img src in JavaScript in Laravel Vite

Question

I don't understand this Vite documentation. My images should be in the resources folder, but the JS code still executes in the public folder. If css reads images without any problems ( background: url(../img/1.png), then JS will not do that. It wants to see that image in the public folder. And even if I write the full path to the image on the example of.

$("<img />", {
   src: '../../../../img/interface/dexPodium.png',
}).appendTo(this);

I still won't see it unless I do it like this.

const imgUrl = new URL('../../../../../img/interface/dexPodium.png', import.meta.url);

But, after the build, the images will be available in the public folder, so why should I write if it will be like

const imgUrl = new URL('./img/interface/dexPodium.png', import.meta.url);.

What am I doing wrong, and what is the correct way to specify paths to images in my JS? All the answers I found are Vue-related.

Answer 1

You can import images directly in your JavaScript code in Vite, and Vite will handle the path resolution for you. This works in both development and production builds.

import imgUrl from '../../../../img/interface/dexPodium.png';

$("<img />", {
   src: imgUrl,
}).appendTo(this);

In this code, import imgUrl from '../../../../img/interface/dexPodium.png'; imports the image file and assigns its resolved URL to the imgUrl variable. You can then use this variable as your image's src attribute.

This way, you don't need to worry about the exact path of the image file in the public folder. Vite will automatically handle the path resolution for you.