How can I set PrismicNextImage to use object-fit:cover on the image?

Developing with Prismic
1

I am trying to use the PrismicNextImage component but can't figure out how to add the object-fit:cover css rule.

This is what I am doing with the Next.js Image component:

<Image
  src={slice.primary.background_image.url}
  alt={slice.primary.background_image.alt}
  fill={true}
  className="object-cover"
/>

How can I do that with PrismicNextImage component though?

3

Hello @chris9

Thanks for reaching out to us.

PrismicNextImage automatically forwards the image’s URL and dimensions to next/image. It accepts all next/image props except src.
For example:

<PrismicNextImage field={image} className="w-full" />

Learn more about in the technical reference article: @prismicio/next Technical Reference - Documentation - Prismic

Let me know if you need any further assistance.

Thanks,
Priyanka