<Image> not working as it should
Answered
Golden northern bumble bee posted this in #help-forum
Golden northern bumble beeOP
Hey there,
Bit new to Next.js and I have a rather interesting issue. Tried looking for a similar issue in the previous posts but no luck finding one.
I'm trying to render a image on my page but i get an error that says :
'The requested resource isn't a valid image for /portal.png received text/html; charset=utf-8'
public folder seems to be in the right place and the file format seems to be correct since i can display it as an png in my editor and my file explorer.
Anyone experienced anything similar? Or anything obvious I'm overseeing?
Could 'use client' and/or dev environment have anything to do with it?
Bit new to Next.js and I have a rather interesting issue. Tried looking for a similar issue in the previous posts but no luck finding one.
I'm trying to render a image on my page but i get an error that says :
'The requested resource isn't a valid image for /portal.png received text/html; charset=utf-8'
public folder seems to be in the right place and the file format seems to be correct since i can display it as an png in my editor and my file explorer.
Anyone experienced anything similar? Or anything obvious I'm overseeing?
Could 'use client' and/or dev environment have anything to do with it?
36 Replies
Golden northern bumble beeOP
the page code
how it looks checking the properties in file explorer:
DirtyCajunRice | AppDir
out of curiosity… why wouldnt you import the image?
Golden northern bumble beeOP
Like, insert the full path?
Oh, like via url?
DirtyCajunRice | AppDir
no i mean
import MyImage from 'mypath'Answer
Golden northern bumble beeOP
I'd like to enjoy the convenience of the public folder for static assets. If that makes sense.
Oh right. Good question.
DirtyCajunRice | AppDir
you lose the benefits you get from static image data
if you dont import
Golden northern bumble beeOP
Is that needed for the src= to understand what to look for?
DirtyCajunRice | AppDir
its just good practice. theoretically the way you are doing it should work… but it isnt good practice anymore so its not worth troubleshooting
Golden northern bumble beeOP
I could try an import and see if it helps.
DirtyCajunRice | AppDir
it 100% will work 🙂
Golden northern bumble beeOP
So say i have 100 assets, i could import just the folder right and point at the right asset in src?
Thanks btw for answering so quickly. I'll try it when I'm back at my computer
DirtyCajunRice | AppDir
you import images individually. cant import a folder
Golden northern bumble beeOP
Oh ok
DirtyCajunRice | AppDir
that would be expensive for the compiler
Golden northern bumble beeOP
So if i have 50 assets, i need 50 lines?
DirtyCajunRice | AppDir
exactly
Golden northern bumble beeOP
Or i could probably import them in components
DirtyCajunRice | AppDir
some people make a helper ts file and import all their images into a map
but i think its a bit icky haha
Golden northern bumble beeOP
Oh yeah mapping makes sense
DirtyCajunRice | AppDir
just import it where you need it
if you need all 50 in one component though then a map makes sense
Golden northern bumble beeOP
Gotcha. Not much of a hassle really
Golden northern bumble beeOP
Thanks @DirtyCajunRice | AppDir, that worked perfectly.
DirtyCajunRice | AppDir
Golden northern bumble beeOP
Closing this post now
joulev
oh you already did that, thanks!
Golden northern bumble beeOP
I wanted to make it right for y'all @joulev
joulev
yeah appreciate it, not many people do that so i go over the forum often to do this, hope many people are like you
Golden northern bumble beeOP
When people care enough to help me out, I'll make sure to do the same. Thanks!