Next.js Discord

Discord Forum

next/image src question

Unanswered
Glossy Ibis posted this in #help-forum
Open in Discord
Glossy IbisOP
Hello everyone,

Assuming I have an image, profile.png, in the public folder,

Is there any difference between 

<Image src="/profile.png" />


and

import profile from './profile.png'
 
export default function Page() {
  return <Image src={profile} />
}


regarding how the image is served/cached?

1 Reply

@Glossy Ibis Hello everyone, Assuming I have an image, profile.png, in the public folder, Is there any difference between js <Image src="/profile.png" /> and js import profile from './profile.png' export default function Page() { return <Image src={profile} /> } regarding how the image is served/cached?
B33fb0n3
yes, the main difference is, that your first code snipped would throw an error and the other wouldn't.

I assume your first code bracket is also inside a component. So to answer your question: yes, it makes a difference. Iirc your second option will load the image faster as nextjs has a direct reference to the image instead of just a string. Also its typesafe. However, the roundtrip still exists and the caching is the same