Background images not working with vite in laravel project because local dev url is being used

Question

I am using vite to build my assets and this works fine except for the background images.

Example:

<img src="/img/ruben.jpg" alt="Ruben">

Works and has as url: http://mylocalsite.nl.test/img/ruben.jpg which is good.

But this:

&:before{ content: ""; background-image: url('/img/svg/echtveilig-beeldmerk.svg'); }

Has as url: http://127.0.0.1:5173/img/svg/echtveilig-beeldmerk.svg which is the local server started by vite but I don't want that, I just want the same url as for image tags. How can I fix that?

I tried creating a file 'postcss.config.js' and adding:

module.exports = { plugins: { autoprefixer: {}, }, };

But this does not work.

My package json:

{ "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.2", "lodash": "^4.17.19", "postcss": "^8.1.14", "sass": "^1.50.1", "sass-loader": "^12.1.0", "vite": "^4.0.0" }, "dependencies": { "bootstrap": "^5.3.0-alpha1", "autoprefixer": "^10.4.8", "swiper": "^8.1.3" } }

black_belt · Accepted Answer · 2023-11-21 03:52:48Z

I am assuming your "img" folder is inside the public folder and your scss file is inside "resources/sass" of your Laravel project.

In your CSS file, simply replace your code with the following:

&:before{ content: ""; background-image: url('../../public/img/svg/echtveilig-beeldmerk.svg'); }

Kartik Bharne · Accepted Answer · 2023-01-12 11:13:18Z

try this instead

url("{{ asset('assets/img/svg/echtveilig-beeldmerk.svg') }}")

Collectives™ on Stack Overflow

Background images not working with vite in laravel project because local dev url is being used

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related