responsive image | Next.js | Page 1

Hi @rocky crescent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Based on the information provided in the extracts, there could be a few reasons why your image isn't showing up.

Remote Images: If the image you're trying to display is hosted remotely, you need to provide the width and height props manually as Next.js does not have access to remote files during the build process. In your case, you're using a local path, so this might not be the issue. Source (https://nextjs.org/docs/app/building-your-application/optimizing/images)
Image Sizing: The width and height attributes are used to infer the correct aspect ratio of the image and avoid layout shift from the image loading in. They do not determine the rendered size of the image file. Source (https://nextjs.org/docs/app/building-your-application/optimizing/images)
Parent Element Styles: When using fill, the parent element must have position: relative and display: block. This is necessary for the proper rendering of the image element in that layout mode. In your case, you have position: relative set, but you might want to ensure that the parent element also has display: block. Source (https://nextjs.org/docs/app/building-your-application/optimizing/images)
Image Path: Ensure that the path to your image is correct. In your case, you're using /assets/images/featuresItem1.png. This path should be relative to the public directory in your Next.js project.

If none of these solutions work, you might want to check the console for any error messages, as they could provide more insight into what's going wrong.