How to load images correctly ?

[antoinegreuzard]

Hello,

How to load images on php file and scss file ?

I used the function in a previous question, but it's not very ok :

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

How to load images with resources folder ?
When I load images from scss : background-image: url("/resources/static/images/image.jpg"); in scss, it's gave me this in front :
background-image: url(/image-d18ff1d8.jpg);
The real path is /public/themes/wordplate/assets/image-d18ff1d8.jpg or public/themes/wordplate/assets/images/image.jpg

I use <?= get_theme_file_uri( '/assets/images/image.jpg' ) ?> in php.

Finally, it's not working in npm run dev, here the result for the scss : background-image: url(/resources/static/images/image.jpg);
The assets folder not change on save, so I can't load image in php without npm run build every 2 seconds.

Thanks.

[vinkla]

Not sure. I try to put as many images in the HTML as possible. This might help: https://laravel.com/docs/9.x/vite#url-processing

[antoinegreuzard]

I did not succeed, can you give me an example? With hierarchy and image call in php file?

[vinkla]

No, I can't help debug your project.

[Kingo11]

I facing the same problem, my solution is to put my images directly in /public/themes/wordplate/assets/my-image.jpg
I'm using the /resources path only for css and js.

[vinkla]

Don't know. Haven't used laravel-vite-plugin with WordPlate.

[Kingo11]

Ok guys, i finally got it !
Here is my vite.config.js:
https://github.com/Kingo11/viteJSconfig-wordpress/blob/master/vite.config.js

I added some commentaries to better understanding.
With that, images loaded successfully with dev and build.
Css example:
html { background-image: url('../static/my-image.png'); }
For html and php files just create a directive for images href with http://localhost:5173/resources/static/ for dev and http://localhost/themes/wordplate/assets/img/ for build.
I hope that will help you !

[antoinegreuzard]

Thanks, it's work for the css, but i don't understand for the php file in the theme.
We need to changes the href in dev to build mode ?

[Kingo11]

Ok nice.
For php juste use a directive like the function.php file to know if you are in local or prod:
<?php if ( wp_get_environment_type() === 'local' && is_array(wp_remote_get('http://localhost:5173/')) // is Vite.js running ) { $hrefImages = "http://localhost:5173/resources/static/"; } else { $hrefImages = get_theme_file_uri('assets/'); }?> <img src="<?= $hrefImages."my-image.png" ?>" alt="">

[antoinegreuzard]

thanks !

[antoinegreuzard]

Solution (thanks to @Kingo11 and @vinkla) :

https://github.com/antoinegreuzard/wordplate-vite.config.js