CODEWITHSUNDEEP
reactjsnext.js
AleshaLearner
AleshaLearner

Reputation: 135

How can i add images from webpage in NextJs?

Im trying to add logo of coloplast in my project URL(https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png).

**And i always got this error **

Server Error Error: Invalid src prop (https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png) on next/image, hostname "www.coloplast.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

I tryed diferents website such as google images, and stil doesn't work...

  protocol: 'https',
        hostname: 'www.coloplast.com',
        port: '',
        pathname: '/account123/**',

  images: {
      domains: ["www.coloplast.com"] and ["coloplast.com"]
  }

And after each method i restarted my project from console.

Upvotes: 1

Views: 159

Answers (1)

Aspian
Aspian

Reputation: 2065

Based on NextJS official docs about next/image remote pattern, "To protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API."

So in your case, you have to add this code between curly braces of your nextConfig variable in next.config.js file:

    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'www.coloplast.com',
        },
      ],
    },

Upvotes: 1

Related Questions