Docs: The Getting Started docs about local images using the <Image> component are wrong

[ChristianIvicevic]

What is the documentation issue?

In a fairly recent change in #78769 the docs were updated claiming that images from the public directory don't require explicit sizes:

next.js/docs/01-app/01-getting-started/04-images.mdx

Lines 57 to 66 in 9d0081a

	return (
	<Image
	src="/profile.png"
	alt="Picture of the author"
	// width={500} automatically provided
	// height={500} automatically provided
	// blurDataURL="data:..." automatically provided
	// placeholder="blur" // Optional blur-up while loading
	/>
	)

That information is, at the time of writing this, wrong and this behavior was never supported. It's possible this is part of an upcoming feature change in 15.4+, but right now it appears in the documentation of the current 15.3 version and is misleading new users.

Is there any context that might help us understand?

n/a

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/getting-started/images#local-images

[icyJoseph]

Hi,

Yeah, there's obviously a problem, as you are immediately confronted with an error overlay.

I think, the correct code should be:

import Image from 'next/image'
import ProfileImage from './profile.png';
 
export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

I'll double check and update the docs accordingly.