on next/image, hostname is not configured under images in your next.config.js

[Vince-vegas]

Why hostname error keep showing on the page even though I've implemented next.config.js on my projects with domains on it.

The Config file

module.exports = {
  images: {
    domains: ['https://image.tmdb.org/', 'https://api.themoviedb.org/'],
  },
};

// Page

import React from 'react';
import Image from 'next/image';

const BrowseMovie = ({ browseMovie }) => {
  return (
    <div>
      <h1>Movies</h1>
      <div className="d-flex">
        {browseMovie.map((item) => {
          return (
            <div key={item.id} className="card-movie">
              <Image
                src={`https://image.tmdb.org/t/p/w300${item.poster_path}`}
                height={300}
                width={300}
                alt={item.title}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export async function getStaticProps() {
  const movies = await fetch(
    `https://api.themoviedb.org/3/discover/movie?api_key=******&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1`
  );
  const data = await movies.json();

  return {
    props: {
      browseMovie: data.results,
    },
  };
}

export default BrowseMovie;

[jamesmosier]

Try setting up your domains like this:

module.exports = {
  images: {
    domains: ['tmdb.org', 'themoviedb.org'],
  },
};

Only the actual domain should need setup without the protocol and any subdomains.

[Besuf]

It's tricky you shouldn't add https:// in your domain

[DuudeXX8]

Do you already solve it?

[skyespirates]

yeey, it's worked for me thanks

[ventura01]

Great!

[helviorhild]

follow instruction, and at the end restart your dev session. (don't forget your friend "ctrl+c" )

[verhulstd]

I am having the same issue..
This is my next.config.js in root of project

module.exports = {
  images: {
    domains: ["image.tmdb.org"],
  },
};

but still giving me this error:

Server Error
Error: Invalid src prop (https://image.tmdb.org/t/p/w500/dAvJHKwXGWsTNCgC3nCiqGOnagx.jpg) on `next/image`, hostname "image.tmdb.org" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

[mrlaseptima]

same :(

[katungi]

I also had this issue, Did you restart your server after editing the next.config file?

[fer0o]

I restarted the server and work fine. Thanks man

[adamaslan]

restarted the server and its still messed up :/

[rohilpinto]

make sure to add width & height props or layout ='fill'

[wellitongervickas]

Works for me: #18412 (comment)
Create your own image loader maybe help you

[wellitongervickas]

import Image from "next/image";

const externaImageLoader = ({ src }: { src: string }) =>
  `https://static2.taglivros.com/${src}`;

const Book = ({ book }: { book: Books.Book }) => (
  <div>
    <Image
      loader={externaImageLoader}
      src={book.cover.name}
      alt={book.name}
      layout="fill"
    />
  </div>
);

export default Book;

[idemmanuel001]

This worked for me, thank you.

[sanjayrjs16]

I've got a question here.
What if the src comes out to be something not in next.config.js where the domain name is only know at run time ?
Eg: User has option to upload any image to the app (or paste any link) , and src would be known only at run time.

How do we tackle this issue ?

[arthurfiorette]

I think at the moment the only way is to disable image optimization.

<Image 
  unoptimized 
  src="..."
  alt="..."
  // ...
/>

[vladimirrostok]

That helped me very much, thank you for bringing this up!

[sxanni]

Th

I think at the moment the only way is to disable image optimization.

<Image 
  unoptimized 
  src="..."
  alt="..."
  // ...
/>

Thankssssssssssss

[janlin002]

Thankssssssssssss

[EliseiNicolae]

For those who still don't work, try to add on next.config.js:

module.exports = {
  images: {
    domains: 'api-production.s3.amazonaws.com', 'Your_domain'],
  },
}

And then run the app again. 📦

[ghost]

OOOOOOOOh thank you a looooooot !!!!!!

[ghost]

Do you know why we have to add this ?

[EliseiNicolae]

Adding the domains in the images configuration is important because by default, Next.js only allows images to be loaded from the same domain as the application itself. This is a security feature to prevent malicious code from loading images from untrusted sources.

However, in some cases, you may want to load images from a different domain, such as when you're using a content delivery network (CDN) to serve your images. By adding the allowed domains to the images configuration, you're telling Next.js that these domains are trusted sources for images, and it should allow images to be loaded from them.

[sahandghorbani]

very helpful

[aceaspades-worldspark]

Is there any way to use wildcard domains, without setting unoptimized?

[natBizitza]

Yes, here #20953 (reply in thread)

[Kamasah-Dickson]

Hello guys I really need some help here. I am creating a podcast application using the taddy api. I have created a search page that allows users to search for any podcast but it seems like the images have different hostnames and there are already thousands of podcasts with different hostnames. I don't know how to fix this and I can't add all those hostnames.

[Psiale]

Seems like you can disable optimization by calling the unoptimized property on the Image component

[Kamasah-Dickson]

I was able to go about it by adding some hostnames i wanted to inlcude

/** @type {import('next').NextConfig} */
const nextConfig = {
	reactStrictMode: true,
	images: {
		domains: [
			"d3t3ozftmdmh3i.cloudfront.net",
			"s3.amazonaws.com",
			"afr.net",
			"ott.bgea.live",
			"deow9bq0xqvbj.cloudfront.net",
			"d3wo5wojvuv7l.cloudfront.net",
			"episodes.castos.com",
		],
		remotePatterns: [
			{
				protocol: "http",
				hostname: "**",
			},
			{
				protocol: "https",
				hostname: "**",
			},
		],
	},
};

module.exports = nextConfig;

[idityaGE]

thanks its was a great help