Local Image without explicit sizes
Answered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Trying to use local images on a nextjs app that are in a folder within the public directory. I omitted the width and length from the
but I get an error stating that width and height are required for images that aren't local. So then I have to resort to importing the image the old way with something like this:
Not sure why that is? The docs suggest using local images using the first method of simply using the file location instead of importing the image.
Image component since they are local images and look something like thsi: <Image
src="/about/3.jpg"
/>but I get an error stating that width and height are required for images that aren't local. So then I have to resort to importing the image the old way with something like this:
import servicesImage from "@/public/services/2.jpg";Not sure why that is? The docs suggest using local images using the first method of simply using the file location instead of importing the image.
Answered by Asian black bear
You must set the dimensions unless it's statically imported (or uses the fill prop). No way to get around it otherwise.
9 Replies
Asian black bear
You must set the dimensions unless it's statically imported (or uses the fill prop). No way to get around it otherwise.
Answer
Asian black bear
If you don't want to specify the dimensions then colocate the image with the source file and import it.
The bundler will copy it into the public folder for the build if I'm not mistaken so that it doesn't end up being in the bundle.
@Asian black bear You must set the dimensions unless it's statically imported (or uses the fill prop). No way to get around it otherwise.
Greater Shearwater
Asking here since i also had this same question.
What you said is mentioned in the docs, so that's fine.
But then in this example code it says width and height will be automatically set. And that example does not import the image but rather reference a path that's in the public directory. What am i missing here?
https://nextjs.org/docs/app/getting-started/images#local-images
What you said is mentioned in the docs, so that's fine.
But then in this example code it says width and height will be automatically set. And that example does not import the image but rather reference a path that's in the public directory. What am i missing here?
https://nextjs.org/docs/app/getting-started/images#local-images
Asian black bear
I think this is just wrong - I have brought this up in #discussions and if nobody can prove me wrong I'll open a PR to fix the docs.
Greater Shearwater
Yeah, it could be a mistake in the docs. Because if you try to do it, without specifying the width and height, you will get an error as OP has mentioned.
Nebelung
I had the same issue that's what brought me here, so basically what the docs were meant for local files is to import them as modules?
Asian black bear
At the moment, yes. Delba hasn't replied to my message asking about this. We can't rule out that it'd be an upcoming feature though.
Asian black bear
I have opened an issue in the hopes it will gain visibility: https://github.com/vercel/next.js/issues/80023