Hello, I have an image called avatar.png inside my public/ folder.

What's the difference between loading in these two different ways? Is there a recommended one?

I understand that the final result is an <img> element, and for the first way it loads the image from a the nextjs static folder and the second way loads directly from the public folder, but I still don't know which is best and what's the rule of thumb.

1. Through importing

import avatarPng from '@/public/avatar,png';
<Image src={avatarPng} />

2. Through path reference

<Image src="/avatar.png" width="50" height="50" />