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

**URL:** <https://forum.builder.io/t/how-to-use-images-from-data-models-in-next-js/1838>\
**Category:** Technical Questions\
**Tags:** react, nextjs\
**Created:** [March 1, 2022, 11:25pm UTC](https://forum.builder.io/t/how-to-use-images-from-data-models-in-next-js/1838 "2022-03-01T23:25:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [March 1, 2022, 11:25pm UTC](https://forum.builder.io/t/how-to-use-images-from-data-models-in-next-js/1838/1 "2022-03-01T23:25:25Z")

</div>

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`

```auto
// 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:

```auto
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:

```auto
    <BuilderImage
      width={2000}
      height={1000}
      src={content.data.author.image}
    />

```

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [December 7, 2023, 10:25pm UTC](https://forum.builder.io/t/how-to-use-images-from-data-models-in-next-js/1838/2 "2023-12-07T22:25:05Z")

</div>

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](https://nextjs.org/docs/pages/api-reference/components/image#quality) that you will need to override in your next/image component to set the correct, expected value!