Unable to retrieve images with vitejs in dev mode

[lmonterocreaticagency]

Hello,

We can't get the images via css with vitejs in dev mode (vite dev).

Example :

body {
  background-image: url(images/image.jpeg);
}

This works correctly when running a vite build.

But with a quick dev, the images are returned in 404.

How do I get this to work in dev and build?

[vinkla]

Did you add them to the resources/static directory? You'll also need to run build.

[lmonterocreaticagency]

We also use the php web server with the command in the readme

php -S localhost:8000 -t public/

However, when we run the command vite dev (or npm run dev)
it launches a vitejs server and that's when the images in our static folder don't work.

You don't use the vite dev (npm run dev) command?

[vinkla]

Yes, I use the dev command but I never use the server from Vite.js to develop the website. Instead I only use the PHP server. You'll have all features of Vite.js there as well.

[lmonterocreaticagency]

Yes, we do too, but each time vite dev is launched, vitejs automatically launches the following server: http://localhost:5173/

Really sorry for our questions... do you have an example of a link to a file in the static folder with the vite dev command?

[vinkla]

You'll need to specify the entire path. E.g. themes/wordplate/assets/images/filename.jpg.

[lmonterocreaticagency]

Yes thanks for the answers, when we use SASS I have created a function :

$default-theme: 'wordplate';

@function vite-url($path, $theme: $default-theme) {
  @return url('/themes/#{$theme}/assets/#{$path}');
}

After importing my function into my main.scss I can get the images as below:

.bloc {
  &__background {
    background-image: vite-url('images/background.png');
  }
}

Thanks again for your answers!

[azralth]

I've searching for 3 hours. And find this discussion. You just made my day.