why don't images with absolute url work in my css (laravel / vite)?

Question

I configured project with laravel 9 and everything works. Then I moved the layout and everything is fine too.

When I make a resource build, the site works correctly.

B0ut when vite runs server (0.0.0.0), then all the images that are registered in css do not work.

All images are in the public folder. And I move them over is not an option for me.

csss code:

background-image: url('/img/home/sweets-one.png');

{my_local}/img/home/sweets-one.png - 200

http://0.0.0.0:3000/img/home/sweets-one.png - 404

vite config:

export default defineConfig({ server: { host: '0.0.0.0', port: 3000, open: false, }, plugins: [ vue(), laravel({ input: [ // css 'resources/scss/app.scss', ], refresh: true, }), ], });

how can I fix it?

what vite version are you running ? Also server settings does not make any sense as long as you are running on a different web server — jmvcollaborator
– jmvcollaborator, Commented Feb 18, 2023 at 2:41
@Charlie, I use docker and I need to share port. but without server options it doesn't work too. — Nepster
– Nepster, Commented Feb 19, 2023 at 10:55
@jmvcollaborator, I wrote my local domain and port and everything worked. Thanks for the tip. — Nepster
– Nepster, Commented Feb 19, 2023 at 10:57
@Nepster Although it's not about the issue you asked, but there is no need to set server options, just run command npm run dev --host and set the docker forward port to correct, then you can easily view app with such as localhost:8080. — Charlie
– Charlie, Commented Feb 20, 2023 at 8:09

Tyler · Accepted Answer · 2023-09-04 21:58:28Z

When running Vite using npm run dev, this will rewrite image URLs in your CSS files to be absolute URLs e.g. prefixed with http://localhost. npm run build will keep relative URLs like /images/foo.jpg unchanged so your app in production will be unaffected.

export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, transformOnServe: (code) => code.replaceAll('/images', 'http://localhost/images'), }), ], });

Nepster · Accepted Answer · 2023-02-19 11:06:08Z

So, If we user docker and local domain with custom port, you need configure Vite also.

For example: My project use docker and works on the domain: mysite.loc:8080

So, Vite should be configured like this:

export default defineConfig({ server: { host: 'mysite.loc', port: 8080, open: false, }, plugins: [ vue(), laravel({ input: [ // css 'resources/scss/app.scss', ], refresh: true, }), ], });

Collectives™ on Stack Overflow

why don't images with absolute url work in my css (laravel / vite)?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related