40

I use the Next.js Image component for image optimization. It works great on dev but it doesn't load images from external URLs in production.

What can I do?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Mahdi
  • 526
  • 2
  • 5
  • 16

5 Answers5

90

You need to set the configuration in the next.config.js file first.

For Example:

on next.config.js

module.exports = {
    images: {
        domains: ['images.unsplash.com'],
    },
}

on pages/your_page_file.tsx

<Image
    alt="The guitarist in the concert."
    src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
    width={2250}
    height={1390}
    layout="responsive"
/>
Athachai
  • 1,024
  • 9
  • 8
9

If you want to display any images in nextjs app from accross the internet; here is my next config:

const nextConfig = {
    reactStrictMode: true,
    i18n,
    sassOptions: {
        includePaths: [path.join(__dirname, 'src/styles')],
        prependData: `@import "variables.scss";`,
    },
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: '**',
                port: '',
                pathname: '**',
            },
        ],
    },
}
Tugrul Yildirim
  • 329
  • 2
  • 8
7

Add and declare your domain in your next config, next.config.js:

module.exports = {
    reactStrictMode: true,
    images: {
        domains: ["yourDomain.com"],
        formats: ["image/webp"],
    },
};

The configuration file, next.config.js, should be in the root of your project.

And lastly, restart project even in dev mode.

Jason R Stevens CFA
  • 2,232
  • 1
  • 22
  • 28
saeed latifi
  • 71
  • 1
  • 3
6

For future references, I was having the same problem after deploying my next.js site to Netlify. Only later, reading my logs, I found

Image domains set in next.config.js are ignored. Please set the env variable NEXT_IMAGE_ALLOWED_DOMAINS to "cdn.sanity.io" instead

So this is probably something to note. In the meanwhile before I saw it, I plugged this next-sanity-image plugin https://www.sanity.io/plugins/next-sanity-image to my page, which also bypassed the problem

op_exchanger
  • 94
  • 2
  • 7
  • 1
    Actually, It finally worked on the local build but still having the same issue on docker built on the server! – Farrokh Rostami Kia Jun 17 '21 at 07:39
  • 1
    Hum, I didn't use Docker so I don't know if there's an extra config for this case. You used the env variable on netlify or the plugin? – op_exchanger Jun 17 '21 at 16:24
  • I have a home server for nextjs where I deployed it with docker container. All env. variables (public/private) are working fine but I can't make this image trusted domain work. I even tried this docker container on my local machine and I got the same error over there too. Despite docker, they work fine when I execute my project with yarn start – Farrokh Rostami Kia Jun 19 '21 at 05:27
  • 1
    @op_exchanger You have to add the variable on netlify itself. Here are the steps to do so - https://docs.netlify.com/configure-builds/environment-variables/#declare-variables – wrogn Jun 20 '21 at 13:44
  • @FarrokhRostamiKia Did you try ensuring you're copying the `next.config.js` to the Docker envionment? Spotted [this issue](https://github.com/vercel/next.js/issues/18412#issuecomment-751272319) with some useful suggestions in that thread – adamduncan Sep 14 '21 at 15:39
-3

For me was just add blocker extension.

JoBaHP
  • 99
  • 1
  • 3