# Image are not visible for next/image on production url

**URL:** <https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539>\
**Category:** CMS\
**Tags:** visual-editor, nextjs\
**Created:** [May 9, 2024, 4:47pm UTC](https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539 "2024-05-09T16:47:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohsin](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mohsin](https://forum.builder.io/u/mohsin)\
**Post date:** [May 9, 2024, 4:47pm UTC](https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539/1 "2024-05-09T16:47:44Z")

</div>

I have switched my images to next/Image for better performance. everything is fine on localhost but when code is deployed on vercel the images show alt tag text instead of images on editing window .

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/25ceedff5f850e153302e06d3ddf989a8bcaf73c.jpeg)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 9, 2024, 5:04pm UTC](https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539/2 "2024-05-09T17:04:19Z")

</div>

Hello @mohsin,

Are you encountering any console errors? I suspect that CORS errors might be the cause, and you may need to add the [cdn.builder.io](http://cdn.builder.io) domain to your next.config.js file.

Here’s an example of how you can do that:  
e.g.,

```auto
module.exports = withBuilderDevTools(
  bundleAnalyzer({
    target: 'serverless',
    images: {
      domains: ['res.cloudinary.com', 'cdn.builder.io', 'via.placeholder.com'],
    },
    async headers() {
      return [
        {
          source: '/:path*',
          headers: [
            {
              key: 'Content-Security-Policy',
              value:
                'frame-ancestors https://*.builder.io https://builder.io http://localhost:1234',
            },
          ],
        },
      ]
    },
    env: {
      // expose env to the browser
      BUILDER_PUBLIC_KEY: process.env.BUILDER_PUBLIC_KEY,
      IS_DEMO: process.env.IS_DEMO,
    },
    i18n: {
      // These are all the locales you want to support in
      // your application
      locales: ['en-US', 'en-FR', 'en-DE', 'Default'],
      // This is the default locale you want to be used when visiting
      // a non-locale prefixed path e.g. `/hello`
      defaultLocale: 'Default',
    },
  })
)

```

---

<div class="post-metadata">

**Author:** ![mohsin](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mohsin](https://forum.builder.io/u/mohsin)\
**Post date:** [May 11, 2024, 4:17pm UTC](https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539/4 "2024-05-11T16:17:01Z")

</div>

@manish-sharma here is the actual image call in production

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4a15c29be2ca1ef773237a0f43ec51f650e8b206.jpeg)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0fe3055178833225888774ff5b9f11327a5df9d7.png)

if i use unoptimized props along next/image Component the image start displaying in editing window aswell. can you please give any idea what could be issue csp settings also not allowing it ?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 14, 2024, 11:52am UTC](https://forum.builder.io/t/image-are-not-visible-for-next-image-on-production-url/5539/5 "2024-05-14T11:52:49Z")

</div>

Hello @mohsin,

I suspect that the issue is originating from the use of Next/Image. If you are still experiencing problems, please provide the content link where we can reproduce the issue.