Next.js Discord

Discord Forum

<Image> not working as it should

Answered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Avatar
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?
Image
Answered by DirtyCajunRice | AppDir
no i mean import MyImage from 'mypath'
View full answer

36 Replies

Avatar
Golden northern bumble beeOP
Image
the page code
how it looks checking the properties in file explorer:
Image
Avatar
out of curiosity… why wouldnt you import the image?
Avatar
Golden northern bumble beeOP
Like, insert the full path?
Oh, like via url?
Avatar
no i mean import MyImage from 'mypath'
Answer
Avatar
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.
Avatar
you lose the benefits you get from static image data
if you dont import
Avatar
Golden northern bumble beeOP
Is that needed for the src= to understand what to look for?
Avatar
its just good practice. theoretically the way you are doing it should work… but it isnt good practice anymore so its not worth troubleshooting
Avatar
Golden northern bumble beeOP
I could try an import and see if it helps.
Avatar
it 100% will work 🙂
Avatar
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
Avatar
you import images individually. cant import a folder
Avatar
Golden northern bumble beeOP
Oh ok
Avatar
that would be expensive for the compiler
Avatar
Golden northern bumble beeOP
So if i have 50 assets, i need 50 lines?
Avatar
exactly
Avatar
Golden northern bumble beeOP
Or i could probably import them in components
Avatar
some people make a helper ts file and import all their images into a map
but i think its a bit icky haha
Avatar
Golden northern bumble beeOP
Oh yeah mapping makes sense
Avatar
just import it where you need it
if you need all 50 in one component though then a map makes sense
Avatar
Golden northern bumble beeOP
Gotcha. Not much of a hassle really
Avatar
Golden northern bumble beeOP
Thanks @DirtyCajunRice | AppDir, that worked perfectly.
Avatar
Golden northern bumble beeOP
Closing this post now
Avatar
oh you already did that, thanks!
Avatar
Golden northern bumble beeOP
I wanted to make it right for y'all @joulev
Avatar
yeah appreciate it, not many people do that so i go over the forum often to do this, hope many people are like you
Avatar
Golden northern bumble beeOP
When people care enough to help me out, I'll make sure to do the same. Thanks!