Not able to show Image in Swiper.js (SSG in production)
Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Australian Freshwater CrocodileOP
Faced with that problem after creating new build but during dev mode everything works pretty well.
I'm getting images from external link (absolute path), the same problem is with Next Image component and also img tag.
Does anyone know how to fix that ?
"swiper": "8.4.7",
"next": "13.4.4"
I'm getting images from external link (absolute path), the same problem is with Next Image component and also img tag.
Does anyone know how to fix that ?
"swiper": "8.4.7",
"next": "13.4.4"
22 Replies
@Australian Freshwater Crocodile Faced with that problem after creating new build but during dev mode everything works pretty well.
I'm getting images from external link (absolute path), the same problem is with Next Image component and also img tag.
Does anyone know how to fix that ?
"swiper": "8.4.7",
"next": "13.4.4"
Dunker
have you configured that img domains in next.config
Australian Freshwater CrocodileOP
For sure
Basically it throws an error if you skip domain config first but the problem exists only in build so in dev everything is good :/
@Australian Freshwater Crocodile Basically it throws an error if you skip domain config first but the problem exists only in build so in dev everything is good :/
Dunker
are you seeing any errors at console or build log
or network tab
Australian Freshwater CrocodileOP
No, build works well without any warns or errs in server console as well as in browser
Let me check it again
Dunker
look at network tab at devtools and make sure you are fetching all images correctly
Australian Freshwater CrocodileOP
All images have fetched by server during static paths 😦
Only this warning in server console
For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Only this warning in server console
For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Dunker
images fetching with 200 OK and not showing and no errors
Australian Freshwater CrocodileOP
Yep
Dunker
have you gave width height alt
and just use <img tag to see if shows
Australian Freshwater CrocodileOP
1 min I'm checking
Australian Freshwater CrocodileOP
Have to cover up sensitive links but as u can see
Can Swiper.js be a reason ?
Dunker
probably, it could be not working with next <Image
Australian Freshwater CrocodileOP
I just replaced with native img
Dunker
thats why i said just try with <img
Australian Freshwater CrocodileOP
Yes it is but still getting that result
Dunker
so weird, probably its related with swiper
also i ve seen similar issues at other question tags here, so i think its related with next/image pkg