The code is as below:

import Image from "next/image"
import Link from "next/link"
import profileImg from "@/public/doraemon.png"

const Logo = () => {
  return (
    <Link href="/" className="flex items-center text-dark dark:text-light">
        <div className=" w-12 md:w-16 rounded-full overflow-hidden border border-solid border-dark dark:border-gray  mr-2 md:mr-4">
            <Image src={profileImg} alt="CodeBucks logo" className="w-full h-auto rounded-full" sizes="20vw" priority />
        </div>
        <span className="font-bold dark:font-semibold text-lg md:text-xl">CodeBucks</span>
    </Link>
  )
}

export default Logo;

I have already convert doraemon.jpeg into png, add width /fill = {true} but next.js should show the same error every time:

Unhandled Runtime Error
Error: Image with src "/blogs/doraemon.jpeg" is missing required "width" property.

The code is from:

https://github.com/codebucks27/Nextjs-tailwindcss-blog-template/blob/main/src/components/Header/Logo.js

Why did the error pop up? Please give me some suggestions. Thank you.