0

I'm failing to set url property for background-image. Things work good with sail npm run build but with sail npm run dev path breaks. It is embarrassing, but I would like to ask for some help here:

welcome.blade.php

<head>
   @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

app.css

.test {
    background: url('../../storage/images/bg1.jpg');
    width: 100%;
    height: 200px;
}

Path to css works file: http://0.0.0.0:5173/resources/css/app.css

Path to image inside css file doesn't work because it lead to: http://0.0.0.0:5173/storage/images/bg1.jpg

bg1.jpg file can be accessed on port 80 but not on port 5173. What is the trick? How it suppose to work?

Addition info:

  1. sail up and sail npm run dev on progress
  2. Laravel v10.7.1 (PHP v8.2.5) clean installation, all defaults.
Yevgen
  • 1,239
  • 3
  • 15
  • 30

1 Answers1

0

I experienced the same issue while working with the new Vite system. The solution in my case was to properly store the needed assets in the resource directory like this:

.test {
    background: url('../assets/bg1.jpg');
    width: 100%;
    height: 200px;
}

├ app
├ resources
│ ├ assets
│ │ └ bg1.jpg
│ ├ css
│ │ └ app.css
│ └ ...
├ vite.config.js
└ ...

I guess this is like a configuration hidden deep in the internal Vite and Laravel plugin configuration. Neither the storage nor the public directory worked. Once you build the final package, Vite will copy the assets to the corresponding public folder.

Let me know if that works for you.

Kevin
  • 1,633
  • 1
  • 22
  • 37
  • I don't think it is not about the path to the directory. It is about the port in the path. Vite include CSS file with path `http://0.0.0.0:5173/resources/css/app.css` so all relative urls inside have port in its path. But they are on 80 port. – Yevgen Apr 18 '23 at 14:49
  • Did you try to change the path? I have the same setup locally and the asset is loading correctly at the port provided by Vite instead via Docker, because it uses the internal asset delivery instead of using any web server running in Docker. – Kevin Apr 18 '23 at 15:41