Updated on 2026-02-20
URL copied to clipboard

Image

Or copy link

Image

Estimated reading: minutes 5 views

5 views
Min read

In normal HTML we use <img> tag, while in React Next JS template, we must use the Image component of the element. You can check this guideline for more details about the Image component.

But here in t3headless, you must use the “Nimage” component which is a custom component and it does override the Image component and will support each property of the Image component. The example is given code below.

{_data?.images?.length > 0 ? _data?.images.map((immg: any, index: any) =>
<Nimage
key={_data?.uid + immg?.url + index}
immg={immg}
data={data}
width={500}
height={500}
className="w-100 h-auto"
alt="Image"
title="Image"
/>
)) : null}

Note: According to the guideline, before using the Image component, we should import the component, but please note here that in the t3headless template, we don’t need to import the Image component or Nimage component before using it.

Nimage attribute details

Check the below explanation of the Nimage attributes. The attributes that contain the ‘*’ sign are mandatory.

  1. key*: Key attributes are mandatory to avoid the key warnings of Next.JS
  2. immg*: to pass the immg object is mandatory, which will be fetched from the loop.
  3. data*:  It is the mandatory attribute to render the image.
  4. width: It is not a mandatory attribute, but if we add the width, the image will take the given width, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
  5. height: It is not a mandatory attribute, but if we add the height, the image will take the given height, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
  6. className: It is not a mandatory attribute; we can use this to add a class to the image.
  7. alt: it is the mandatory attribute but suppose if you don’t specify this then it will take the alt text from the file details.
  8. title: It is the mandatory attribute, but suppose if you don’t specify this then it will take the alt text from the file details.

Image as background

If you want to use the image as a background image, then you will need the URL of the image. To get the URL of the image, you can use the object immg?.url as seen in the code below.

{_data?.images?.length &gt; 0 ? _data?.images.map((immg: any, index: any) =&gt;
    &lt;div style={{backgroundImage: `url(${immg?.url})`}}&gt;&lt;/div&gt;
)) : null}
Share

Leave a Comment