Image are not visible for next/image on production url

Technical Questions CMS
,
1

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
image1208×1242 108 KB

2

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 domain to your next.config.js file.

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

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',
    },
  })
)
4

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

image
image1576×1584 218 KB

image
image1576×1584 387 KB

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 ?

5

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.