Images are not showing for the production version
Answered
Muhammed Khal posted this in #help-forum
Hai Guys I have images on my public folder public/images. when I use it in global css, it's showing in local but when I move to the production mode then it's not showing any images, can you guys help me??
61 Replies
@aardani
Devon Rex
Ensure that the file paths used in your CSS are correct and relative to the public directory. In production, file paths are more strict and case-sensitive. or Large image files can cause issues. Optimize them for the web to ensure they load properly.
Yes it's a small image and it;s working fine in local but not sure what happend in prod, do I have to do any config in next.config? @Devon Rex
@Muhammed Khal Yes it's a small image and it;s working fine in local but not sure what happend in prod, do I have to do any config in next.config? <@1058433105909784596>
Northeast Congo Lion
did you add supported images?
images: {
remotePatterns: [
{
protocol: 'http' (or https),
hostname: 'domain.com'
}
]
}if still not working, next steps, check console - are you receving a 404?
@Northeast Congo Lion
images: {
remotePatterns: [
{
protocol: 'http' (or https),
hostname: 'domain.com'
}
]
}
But, it's a local images, do I still need to do?? @Northeast Congo Lion
Northeast Congo Lion
Oh
Show code
And folder pls
Code of hehe
body {
background-image: url('./../public//assets/icons/bg-pattern-top.svg'),
url('./../public//assets/icons/bg-pattern-bottom.svg');
background-color: hsl(185, 75%, 39%);
background-repeat: no-repeat, no-repeat;
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
}@Northeast Congo Lion
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfigNortheast Congo Lion
First
Remove // from public
Just public/
Next
use ../../
Not ./../
It's in global.css
Okay lemme deploy abd try hehe
Module not found: Can't resolve './public//assets/icons/bg-pattern-top.svg'
Deployment got failed because no images are found, probably because of the path is not matching
Deployment got failed because no images are found, probably because of the path is not matching
https://github.com/Syammed2429/profile-card/blob/master/app/globals.css
@Northeast Congo Lion
Bro maybe you can have a look please
@Northeast Congo Lion
Bro maybe you can have a look please
Northeast Congo Lion
@Muhammed Khal
you are not getting this during dev?
please use
/public/assets/...no dot
I used that one too but still it’s not showing any images
Northeast Congo Lion
are you sure
It’s bg color, comment bg color
Northeast Congo Lion
huh?
background-color
Northeast Congo Lion
ok
Comment it out and check
It’s not showing right
Northeast Congo Lion
ah
@Muhammed Khal
Yes I’m here
Northeast Congo Lion
pls dont use public in path
/assets
Northeast Congo Lion
Answer
Northeast Congo Lion
/assets/....Is it working
Northeast Congo Lion
yes
big blue circle
Thanks a lot man
Northeast Congo Lion
as u can see 🙂
Yes lemme deploy and see
Northeast Congo Lion
i dont use image in css much tbh
Yes I also use in components
But this challenge, made me to use it for the body erk
Deploying
@Muhammed Khal Deploying
Northeast Congo Lion
kk mark as solved if it works 🙂
Thanks