I’m new to Nextjs. using the latest stable version with app router.

I tried to set the image source to Image component of Next js as shown in the code below:

    <Link href={_coInfo?.WASite} style={{ textDecoration: "none" }}>
      <Image alt="Logo" src='/assets/fallbackLogo.png' width={500} height={500} />
    </Link>

but it doesn’t recognize the path and doesn’t show the image. this is my folder structure:

src
└── app
    ├── baseurl
    ├── sass_utils
    ├── xhr
    ├── assets
    │   └── fallbackLogo.png
    ├── fonts
    ├── login
    ├── theme
    ├── favicon.ico
    ├── globals.scss
    ├── layout.js
    ├── page.js
    ├── page.module.css
    └── middleware.js

now, looking to the Next js document, it is a bit confusing. in the Next/Image document it shows this example:

https://nextjs.org/docs/pages/api-reference/components/image

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

but in other part of the document it shows this example:

https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

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

and in this example, it says width and height are automatically provided, which can cause problem for me, because if I have a larger image originally but I want to show an small version of it on the page, I can’t do this.

so, I don’t know, whether should I import the image and then later on I should use it as src of the Image component, or I should give the path to its relative directory.