[SOLVED] Why does my image is not rendered using Next.JS Image tag and only the alt text is shown?

Why does my image is not rendered using Next.JS Image tag and only the alt text is shown?

I'm using next/image and my image just won't show in the browser, only the alt text.

My goal is to display an image with rounded corners and centered. Am I missing something?

The code is the following:

import Image from "next/image";      

<div className="relative h-32 w-32 mx-auto overflow-hidden">
        <Image
          src="/images/pp.jpg"
          alt="profile pic"
          width={500}
          height={500}
          className="rounded-full object-cover object-center"
        />
</div>

I'm using Next.JS 14 for this, and the image is already located inside the public directory.

I already tried to replace with the regular HTML img tag, I've tried different weight and height, I tried different h- and w-, I tried changing from overflow-hidden to overflow-auto, no success.

If you want to see how that output is: https://prnt.sc/xaO-n8De6RtK

Solution

You can debug this issue by doing the following to the src attribute:

src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4OiAcEKYFke_7WcK6Effo5EZ-eXFLN9u6Fm6qdOMn&s"

You'd get the desired result because the image can be found.

The actual solution to your bug will be to correctly input the correct path of the image to the src attribute and that you have the correct filename and extension.