Laravel 12 + Vite - File not found when trying to display a background image from a CSS file

I have an svg file placed in /public/assets/icons, and I try to use it from within a CSS file:

.some-icon {
    background-image: url("/assets/icons/arrow.svg");
}

I get error 404 Not Found (seen in devtools), but when I try to use the same path and image from within a Blade file as <img>, it works:

<img src="/assets/icons/arrow.svg" alt="">

I can see that it might be related to the Vite dev server because it tries to get the images that are loaded from CSS files via http://[::1]:5173/assets/icons/arrow.svg

and when it's in the <img> it's from localhost:8000.

How can I resolve that? What is the correct way?

tykus

5 months ago

Level 104

Add the following to your vite.config.js in order to serve images from the public directory directly:

export default defineConfig({
+    resolve: {
+       alias: {
+           '/images': '/public/images',
+       }
+   },
    plugins: [

1 like

Please or to participate in this conversation.