How to use images from data models in next.js?

Technical Questions
,
1

If you’re using images in pages and section, builder automates the image optimization process and there’s no need to do anything special in your code, this guide is for using images from data model entries, in this case you’d want to:

  • add cdn.builder.io to the list of images cdns in next.config.js 
// next.config.js
  images: {
    domains: [ 'cdn.builder.io'],   
  }
  • Wrap Next/Image with a component with a loader method to tell next.js how to communicate with Builder’s Image API:
import Image from 'next/image'

const builderLoader = ({ src, width, height,  quality }) => {
  return `${src}?width=${width}&quality=${quality || 75}&height=${height}`
}

const BuilderImage = (props) => {
  return <Image loader={builderLoader} {...props} />
}

export default BuilderImage

Now you can use this component anywhere you’re rendering images from Builder:

    <BuilderImage
      width={2000}
      height={1000}
      src={content.data.author.image}
    />
1 Like
2

Some users have reported that images from next/image are getting q=75 appended to all images regardless of what is set in the builderLoader. This is a default coming from NextJS that you will need to override in your next/image component to set the correct, expected value!