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

1

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');
}

answered Nov 21, 2023 at 3:52

black_belt

6,82936 gold badges127 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

-2

try this instead

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

answered Jan 12, 2023 at 11:13

Kartik Bharne

104 bronze badges

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related