CODEWITHSUNDEEP
reactjsnext.jsnextjs-image
Haren Sarma
Haren Sarma

Reputation: 2553

hostname "storage.googleapis.com" is not configured under images next js

I am getting the below message:

Error: Invalid src prop (https://storage.googleapis.com/agrf-upload/abcd.png) on `next/image`, hostname "storage.googleapis.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

but my next.config.js is as below:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['storage.googleapis.com', 'www.coinpayments.net', 'coinpayments.net'],
  },
  compiler: {
    removeConsole: false,
  },
  images: {
    minimumCacheTTL: 1500000,
  },
  swcMinify: true
}

module.exports = nextConfig

It was working fine until I restarted my laptop. I am now clueless. Please help me to sort it out.

Upvotes: 2

Views: 2704

Answers (2)

code_lover
code_lover

Reputation: 1

Reference Me:

// url: 'https://www.paypal.com/c2/webapps/mpp/home?locale.x=zh_C2" title="PayPal" onclick="javascript:window.open('https://www.paypal.com/c2/webapps/mpp/home?locale.x=zh_C2','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg'

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: 'paypalobjects.com',
      port: '',
      pathname: '/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg'
    }]
  }
}

module.exports = nextConfig
  //xxx.tsx
  ...
  <Image
src = {
  "https://paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/Online_Primary_Acceptance_Mark_RGB_V2.jpg"
}
alt = 'PayPal'
//fill
width = {200}
height = {127}
/>

Upvotes: 0

Haren Sarma
Haren Sarma

Reputation: 2553

I had another image section in the config, which was interfering the above image block (used to specify domains):

images: {
    minimumCacheTTL: 1500000,
  },

So now my updated next.config.js looks like:

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['storage.googleapis.com', 'coinpayments.net'],
    minimumCacheTTL: 1500000,
  },
  compiler: {
    removeConsole: false,
  },
  swcMinify: true
}

module.exports = nextConfig

Upvotes: 4

Related Questions