Mahdi
Mahdi

Reputation: 746

next/image does not load images from external URL after deployment

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?

Upvotes: 60

Views: 129281

Answers (8)

JoBaHP
JoBaHP

Reputation: 103

For me, it was just an Ad-Blocker extension.

Upvotes: -5

dodov
dodov

Reputation: 5844

Keep in mind that using environment variables can break this.

I was using Next.js with Docker (using the official Next.js Dockerfile) and AWS Elastic Beanstalk wasn't passing environment variables to the Dockerfile during build. I had a similar next.config.js:

const s3Bucket = process.env.S3_BUCKET;
const nextConfig = {
  output: 'standalone',
  images: s3Bucket ? { remotePatterns: [{ hostname: s3Bucket }] } : undefined,
};

However, with output: 'standalone', the remotePatterns config option is inlined in the resulting server.js file of the docker image. If you open that file, you would see something like this:

const nextConfig = {/* JSON containing `remotePatterns` */}

process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(nextConfig)

In my case, since the S3_BUCKET variable was not available, the remotePatterns option was not ending up in the final docker image. So I just had to hardcode the domain in my next.config.js.

Upvotes: 0

beni biantuadi
beni biantuadi

Reputation: 151

I noticed you're having trouble with next/image not loading external images after deployment. I faced a similar issue, and after some tweaking, here's the configuration that worked for me:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
        port: '',
        pathname: '**',
      },
    ],
  },
}

module.exports = nextConfig

Feel free to give this configuration a try, and let me know if it resolves your problem. If you have any other questions or run into further issues, I'm here to help!

Upvotes: 2

Tugrul Yildirim
Tugrul Yildirim

Reputation: 491

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: '**',
            },
        ],
    },
}

I am giving an update for this answer because I change my usage. My new code example like this:

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    sassOptions: {
        includePaths: [path.join(__dirname, 'src/styles')],
        prependData: `@import "variables.scss";`,
    },
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'example.com',
                port: '',
                pathname: '**',
            },
            {
                protocol: 'https',
                hostname: 'another-example.com',
                port: '',
                pathname: '**',
            },
        ],
    },
}

export default nextConfig;

I change it because of security. If you know the domain you want to fetch images from, it is better to specify them explicitly rather than using wildcard patterns.

This helps to mitigate potential security risks by limiting the sources from which images can be loaded. It also improves performance by reducing unnecessary network requests to unknown domains.

Upvotes: 20

James Hrivnak
James Hrivnak

Reputation: 1

echoing @adamduncan , Next.JS will error out in local development if the domain is not set in next.config.* - More likely is that in the deployed environment, you forgot to copy the config file over in the Dockerfile execution.

Upvotes: 0

Athachai
Athachai

Reputation: 1384

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"
/>

For versions above 12.3.0 this is the accepted approach:

module.exports = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'assets.example.com',
                port: '',
                pathname: '/account123/**',
            },
        ],
    },
}

Refer https://nextjs.org/docs/messages/next-image-unconfigured-host

Upvotes: 126

saeed latifi
saeed latifi

Reputation: 101

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.

Upvotes: 7

op_exchanger
op_exchanger

Reputation: 94

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

Upvotes: 6

Related Questions