How to display images in the Project?

To display the Images avoid using the Next Image component directly like import Image from "next/image";

Use already created Image component built on the top of Next/Image like

import Image from "@/app/components/Image";

Then use the jsx for rendering the image by giving a path.

<Image alt="icon" src={sample.icon} />

This will save you from setting height and width explicity, This component take the full width of its parent.

However, you can also override its default props, All other props are available to modify like you can do as following as well.

<Image
  alt="icon"
  src={sample.icon}
  height={100}
  width={100}
  style={{ objectFit: "cover" }}
/>

For more about what props we can pass, refer to the official documentation: https://nextjs.org/docs/pages/api-reference/components/image (opens in a new tab)