Nextjs - Fixing Loading External Images and Issue of Url Paramater Not Allowed

Introduction

In this post, we will see

• How to load external images to your next.js website
• Fixing issue of Url Parameter not allowed

Using Image component in Next.js

A general code to load image in next.js is

<Image
    src={this.props.article.image.url}
    height={400}
    width={700}
    alt={this.props.article.title}
    />

If this image url is same as your domain name, then its fine and you do not need to do anything else. But, if you are loading images from any other url like unsplash or s3.amazonaws.com, then it will not load it.

By default, Next.js does not allow you to load images from any other url. This is due to security implications. You should know from where you are loading images.

How to Load External Images

You need to configure this in next.config.js configuration file, often placed at the root folder of your project.

A sample file:

module.exports = {
  env: {
    NEXT_PUBLIC_API_URL:
      process.env.NEXT_PUBLIC_API_URL,
    ...some other properties
  },
  images: {
    domains: [
      'images.unsplash.com',
      's3.amazonaws.com'
    ],
  }
};

In this way, you are telling Next.js to load images from above mentioned two domains.

Your image source will become something like below:

/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Ffiles.<my_bucket>.com%2Ffiles%2Farticles%2Fasian_garden_1a6667449c.jpg&w=1920&q=75

There is a catch here too. read next line.

Issue: Url Paramater Not Allowed

If you are deploying your application using Docker containers, then you will most probably face this issue again, even if you have used next.config.js.

When you load, you will see this error:

"url" parameter is not allowed

We generally take Dockerfile from the official sources, and there is this line commented:

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./

Just uncomment above COPY step, and re-build your container image. This should work.

Hope this helps.