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