File not found when trying to display a background image from a CSS file

The issue is that Vite handles assets differently in development mode. When using background-image: url("/assets/icons/arrow.svg") in CSS, Vite tries to resolve it through its own dev server (port 5173), but your SVG is a static file in /public, served by Laravel's server (port 8000).

To fix this:

• Move arrow.svg from /public/assets/icons to resources/assets/icons (or a similar folder under resources).

• Update your CSS to use a relative path (assuming your CSS is in resources/css):

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

Vite will now bundle and serve the asset correctly in dev mode, and it works in production too. Your <img> tag works because it's directly hitting the Laravel server.

If you must keep it in /public, add a proxy in vite.config.js to forward requests:

export default defineConfig({ // ... existing config server: { proxy: { '/assets': { target: 'http://localhost:8000', changeOrigin: true, }, }, }, }); 

Restart Vite after changes.