estebanmunchjones2019

<Image src={path to your image} />

estebanmunchjones2019

//Example of background image using <Image> component

<div className="pt-2" style={{  position: 'relative', width: '100vw', height: '66.66vw'}}>
  <Image 
  src="/assets/images/unsplash-1.jpeg"
  layout="fill"
  objectFit="cover"
  />
</div>

estebanmunchjones2019

<div>
  <img />
</div>

//Or

<div>
  <div>
    <img />
  </div>

estebanmunchjones2019

//Example of card image using <Image /> component

<div className="card" style={{width: "18rem"}}>
  <Image 
  src="/assets/images/unsplash-1.jpeg"
  // just put the original width and height of the original image, in order to provide the right aspect ratio
  // Next.js will automatically reduce the size if the rendered image needs to be smaller.
  width={2400}
  height={1598}
  layout="responsive"