Image are not visible for next/image on production url

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 .

Hello @mohsin,

Are you encountering any console errors? I suspect that CORS errors might be the cause, and you may need to add the domain to your next.config.js file.

Here’s an example of how you can do that:

module.exports = withBuilderDevTools(
    target: 'serverless',
    images: {
      domains: ['', '', ''],
    async headers() {
      return [
          source: '/:path*',
          headers: [
              key: 'Content-Security-Policy',
                'frame-ancestors https://* http://localhost:1234',
    env: {
      // expose env to the browser
      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',

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

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 ?

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.