Image

The Image component is built on top of next/image and allows you to display image thumbnails.

Alternatively, you can use <img /> to display the original image without generating a thumbnail, however, we do not recommend using it.

Example usage

jsx

{/* Width is 60, height is 60 */}
<Image
  src={hero.image}
  loading="lazy"
  width={60}
  height={60}
  decoding="async"
/>

{/* Width is 500, height is adaptive */}
<Image
  src={hero.image}
  loading="lazy"
  width={500}
  decoding="async"
/>

{/* Height is 30, width is adaptive */}
<Image
  src={hero.image}
  loading="lazy"
  height={30}
  decoding="async"
/>

{/* Width is 60, height is 60 */}
<Image
  src={hero.image}
  loading="lazy"
  width={60}
  height={60}
  decoding="async"
/>

{/* Width is 500, height is adaptive */}
<Image
  src={hero.image}
  loading="lazy"
  width={500}
  decoding="async"
/>

{/* Height is 30, width is adaptive */}
<Image
  src={hero.image}
  loading="lazy"
  height={30}
  decoding="async"
/>

Props

Refer to next/image props