Accessing an image from the public directory in theme.css
I tried to access my image from app/public in filament/theme.css, but it always returns a 404 error. I used url('/images/logo.png'), but it didn’t work. Interestingly, url('/public/images/logo.png') worked — but I’m wondering if there’s a better or more correct approach.
Solution:Jump to solution
Sounds like your
/public path solution can also work: https://vite.dev/guide/assets#the-public-directory
I thought there is also a way to disable this behaviour....21 Replies
If you need to include
public/ into your URL, that sounds like your webserver has a bad setup and might expose critical data like .env.
Isn't public the DocumentRoot of your domain?
Or you storage link is set up wrong.I tried to use something like this, but it keeps on saying "--background-image is not defined"
I think we should solve, why you need
public first. Did you need to include public anywhere else in your setup?I have an image in the public directory that I want to add to a specific section filament via Sass.
I understand the problem, but as I said:
public/ should not be needed.
Is this a production site?
Is your webroot set to the public folder?
Do you use public in your .env file?In my local, I set up the env correctly, but when I tried
background-image: url('images/background.jpg') it keeps log error: GET http://127.0.0.1:5173/images/background.jpg 404 (Not Found)Are you accessing your app via
http://127.0.0.1:5173/ ?However, accessing it using
http://brickstack.test/images/background.jpg worked!
But this is the one it logs in console: http://127.0.0.1:5173/Yeah, the issue is, that the files are processed through Vite and it tries to serve them via the Vite server.
What modifcation should I need to make in vite.config for this to work?
Can you place the file next to your CSS file and use relative paths?
I'll check.
Fortunately, it is working. How to clean this up sir?
background-image: url('background.jpg ');Solution
Sounds like your
/public path solution can also work: https://vite.dev/guide/assets#the-public-directory
I thought there is also a way to disable this behaviour.What do you want to clean here?
Should I move the image to resources instead of public directory?
If the
/public solution works for both npm run dev and npm run build, I'd stick with that solution.Unfortunately, it won't, but I'll try to search more if there is solution to fix this one.
What didn't work? You said this is your original question:
Interestingly, url('/public/images/logo.png') worked
I mean yeah that work, but not sure if that's a good approach though.
Apparently that's the way intended by Vite. It might be a bit confusing in a Laravel project, but if it works: Stick with it.
Okay, Sir. Thanks!