I have been working on a project using Next.13 and Typescript. In order to display an Image, I created a component called Logo.tsx.
"use client";
import Image from "next/image";
import { useRouter } from "next/navigation";
const Logo = () => {
const router = useRouter();
return (
<Image
alt="logo"
height="100"
width="100"
className="
hidden
md:block
cursor-pointer
"
src="/images/logo.png"
/>
);
};
export default Logo;
However, I encountered a warning that says:
Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Despite looking into the documentation, I couldn't grasp the solution to this issue. How can I resolve this error?
One attempt I made was to add the priority prop like this:
<Image
priority="true"
alt="logo"
height="100"
width="100"
className="
hidden
md:block
cursor-pointer
"
src="/images/logo.png"
/>
Unfortunately, the warning persisted. Additionally, a new error emerged in Eslint:
Type 'string' is not assignable to type 'boolean | undefined'