next/image hostname error

[gwendall]

I get the following error using an image with an absolute url: Invalid src prop ({REDACTED URL}) on 'next/image', hostname is not configured under images in your 'next.config.js'.

Nothing in the doc mentions how to configure that. Any hints ?

And congrats on the v10 release !

[gwendall]

My bad, just found the answer here: https://github.com/vercel/next.js/blob/canary/examples/image-component/next.config.js

[hamedmatari]

@pkostrzewski wow thanks, I had exactly that problem, appreciate for sharing 🙌🏼

[ventura01]

Funcionó para mi escribiendo:
next.config.js
module.exports = { images: { domains: ['example.com'], formats: ['image/avif', 'image/webp'], }, }

[owaini]

anybody can tell me please how to allow images from any host in next.js
you should use this in frontend folder
create next.config.js file in root then write >>
module.exports = {
images: {
domains: ["res.cloudinary.com"], << here your host image
formats: ["image/avif", "image/webp"],
},
};

[ryanp-hrs]

how do you restart the server manually ?

[dsope05]

@ryanp-hrs just exit server with control c, and start server with npm run dev

[gwendall]

So other question: can we use images from random remote sources ? Using images: { domains: ['*'] } does not seem to work.

[FDiskas]

The idea to use wildcard is not bad #27345

[HNazmul-X]

even localhost or 127.0.0.1 doesn't seem to work. I have a server running on localhost:5000 and I want to load images from that server

so what is the way to allow all images from any host? tell me please if there are anyway.

[FDiskas]

There is no way yo allow any host. And it is not recommended for security and service abuse. Anybody could use your service to resize images via url.
But in case you know what you doing vote for pull request it should allow us to specify a regexp for domains if needed #27345

[ismailghedamsi]

@FDiskas what if an app use an api that get images from multiple source. What can it be done. Isn't it a valid use case?

[FDiskas]

I do believe it is already implemented. Check my PR last comments.

[AlexSapoznikov]

@timneutkens Can we have a bit information on this here please?

[VivekNeel]

If the image is svg and present in public/static, how do you load? It's still excepting hostname to be configured!

[boakyezitek]

Bro you have saved me thank you so much

[seyedkazemmousavi]

If we have a lot of dynamic URLs what should we do?

[Arthur-bl-dev]

Was able to make it work with next-compose-plugins! After installing it, edit next.config.js:

const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')

const nextConfig = {
  images: {
    domains: ['your.domain']
  }
}

module.exports = withPlugins([[withImages]], nextConfig)

Edit: Remember to restart the server!

Worked for me. Thanks!

[douglasmatosdev]

[SOLVED] for me!

@Arthur-bl-dev No need to install dependencies!!!

I was trying to use github avatar url.

The @miguelseguramx is right!

Just remove the protocol (https or http)

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['avatars.githubusercontent.com']
  }
}

module.exports = nextConfig

Navbar.tsx

  <Image
    width={48}
    height={48}
    src="https://avatars.githubusercontent.com/u/57239907?v=4"
    objectFit="cover"
    alt="Picture of the author"
    className="h-8 w-8 rounded-full"
/>

Note: Set the width and height because before I set these properties the image was not showing.

[leratolsname]

thank you

[hatchli]

Loading an image from a cloudinary url, despite setting the domain as cloudinary.com in next.config.js, doesn't work and triggers this error...

[marcelobaez]

Same happens to me with local server (localhost)

[enochndika]

With cloudinary you have to use loader, the domain does not support cloudinary yet.
it is resolved here #18374 (comment)

[tsusini]

@marcelobaez just use domains: ['localhost']

[Nzent]

@marcelobaez just use domains: ['localhost']

Yeah that works for me on 'localhost' , thanx

[dennyzain]

@marcelobaez just use domains: ['localhost']

that works, thanks mate

[ijjk]

Hi, a PR was opened here #18325 to add an error document explaining where this hostname needs to be added to correct the error and will be available in a patch release soon. Wildcard values are not yet supported such as *, although is being investigated for inclusion later down the road.

[all-the-rice]

+1 for wildcard

[0leksiy]

I had the same error when wanted to use both cloudinary images and images located in the /public dir. I managed to make it work with the fallowing config:
domains: [‘res.cloudinary.com’]
This allows me to keep the default loader to access assets in the /public dir and if I want to load images from cloudinary I simply pass the absolute url to src prop of the Image component.

[cyrus-za]

We use auth0 with social logins. It is a little unfeasible to add each and every potential place a user's profile pic could be stored. For example just google alone requires this:

 domains: [
      'storage.googleapis.com',
      'lh1.googleusercontent.com',
      'lh2.googleusercontent.com',
      'lh3.googleusercontent.com',
      'lh4.googleusercontent.com',
      'lh5.googleusercontent.com',
      'lh6.googleusercontent.com',
    ],

etc. See here for a list of 10k+ sub domains https://securitytrails.com/list/apex_domain/googleusercontent.com

[seyedkazemmousavi]

this is good for several URLs

If we have a lot of dynamic URLs what should we do?

[haukurmar]

How many of the lhX.googleusercontent.com sub domains are there?
I see you only list lh1-6.

[qtv100291]

Anyone have idea for this ??

[FDiskas]

Wildcards domains feature is coming. I seen couple PR already. Wait or contribute :)

[jackguoAtJogg]

Anyone have solution for AWS s3 bucket?

[gullerg]

Also, if I replace the Image tags with normale img tags and keep the src constant, it works as expected, so it appears to be related to next/image.

[bhatvikrant]

In this case the keyword is domain, https, http, www its the protocol
The domain it's something.com

Just add your domain in the next.config.js

images: {
   domains: ['api-production.s3.amazonaws.com'],
 },

Thanks for this! It works for amazon s3 bucket

[Rainase]

exactly what @bhatvikrant said 👍

[maguirekrist]

This does not work. I've tried the next.config.js domains, I haven't been able to find a solution for S3 still.

edit - It works now, for anyone else reading this, you need to implement the loader function and tag into your Image component. More info here: https://nextjs.org/docs/api-reference/next/image

[lazarok09]

on my case i have this on next config

// next.config.ts

module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
  images: {
    domains: ['s3.amazonaws.com'],
  },
};

// usage in a normal JSX component - notice that the image don't have https: so i puted it

const user_image_image = "//s3.amazonaws.com..."
          <Image
            src={`https:${user_image_image}`}
            alt={` a profile picture`}
            height={'54px'}
            width={'48px'}
          />

[TitusEfferian]

anyone have solution for firebase storage?
i still got error for this, if my firebase storage url looks like this
https://firebasestorage.googleapis.com/v0/b/my_project_name/o/my_file.png

module.exports = {
    images: {
        domains: [
            'https://firebasestorage.googleapis.com/',
          ],
    }
}

[tsusini]

@TitusEfferian domains: ['firebasestorage.googleapis.com']

[gayathrithedev]

https://icons8.com/icon/2uKzzjRadgyq/twitter

to configure above domain, I am following below, but it is not working as expected in my case.

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

Anyone please help me what is I am missing?

[ignacioHourquescos]

had the same issue

anyone have solution for firebase storage?
i still got error for this, if my firebase storage url looks like this
https://firebasestorage.googleapis.com/v0/b/my_project_name/o/my_file.png

module.exports = {
    images: {
        domains: [
            'https://firebasestorage.googleapis.com/',
          ],
    }
}

This works fine. must restart server!!!

[n1kalai]

when i map array and give image link to components, it caches images and shows them incorrectly :|

[MalvinJay]

I've tried everthing most things suggested here but it's not working. Sigh! how is a library that's suppose to make life eary being this troublesome while configuring?

This is my next.config.js

`
const path = require('path');
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
images: {
domains: [
'localhost',
'BucketName.s3.us-west-1.amazonaws.com',
'amazonaws.com',
'res.cloudinary.com'
]
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
}
}

module.exports = withPlugins([[withImages]], nextConfig)
module.exports = withBundleAnalyzer();
`

And this is the error I keep getting
Error: Invalid src prop (https://BucketName.s3.us-west-1.amazonaws.com/images/2oQqtoaESaFaNqPB5YzDt674oRHnje8FCGoGStAKGPcP5krQ.png) onnext/image, hostname "BucketName.s3.us-west-1.amazonaws.com" is not configured under images in your next.config.jsSee more info: https://err.sh/next.js/next-image-unconfigured-host

[madzadev]

also for those editing domains in next.config.js, remember to restart the dev server for changes to take effect.
just a reminder in case you forget, as I did 😀😀

[edgarasben]

@madzadev thank you :D

[findnizam]

also for those editing domains in next.config.js, remember to restart the dev server for changes to take effect.
just a reminder in case you forget, as I did 😀😀

This worked for me.... thanks a lot

[monecchi]

I've been using prismic.io to manage a blog, and I was also getting that error when trying to set up images.prismic.io domain. After reading next docs about next-image component here: https://nextjs.org/docs/api-reference/next/image#loader, the solution which worked for me was using the "loader" prop to resolve the image url...

next-config.js

module.exports = {
  images: {
    domains: ['images.prismic.io', 'prismic-io.s3.amazonaws.com'],
    // next/image support `srcSet` using the below deviceSizes
    // for more info, visit https://nextjs.org/docs/basic-features/image-optimization#device-sizes
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // https://nextjs.org/docs/basic-features/image-optimization#image-sizes
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

Here's my full implementation

import Head from 'next/head'
import { client } from '../../prismic-configuration'
import Prismic from 'prismic-javascript'
import Listing from '../components/Listing'

//
// Blog Main Page
//

const Blog = (props) => {
return (
    <>
      <Head>
        <title>Blog</title>
      </Head>
      <div>
       <Listing articles={props.articles.results} />
      </div>
    </>
}

export async function getStaticProps() {
  const articles = await client.query(
    Prismic.Predicates.at('document.type', 'article'),
    {orderings: '[my.article.created desc]', pageSize: 10, page: 1}
  )
  return {
    props: {
      articles,
    },
  }
}

export default Blog

//
// Articles Listing Component
//

import PropTypes from 'prop-types'
import {RichText} from 'prismic-reactjs'
import Image from 'next/image'

// data from prismic.io returns the image src as an absolute url, so no need to set up the full url on loader....
const prismicLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`
}

const Listing = ({ articles }) => {
  {articles && articles.map((article) => (
    return (
      <>
        <article key={article.uid}>
            <Image
              loader={prismicLoader}
              src={article.data.article_image.url}
              alt={article.data.article_image.alt}
              width={article.data.article_image.dimensions.width}
              height={article.data.article_image.dimensions.height}
            />
            <h5>{RichText.asText(article.data.title)}</h5>
            <p>{RichText.asText(article.data.excerpt)}</p>
        </article>
      </>
    )
  ))}
}

Listing.propTypes = {
  articles: PropTypes.array,
}

export default Listing;

[xaun]

Same thing for me using AWS S3 after upgrading to 10.1.x from 10.0.x. My next.config.js was correct, but wasn't working until adding the loader function. Thank you

[julioflima]

@xaun @monecchi

Bros this is just a placebo. If you click on the image, the image still is getting from the same server with no optimization.
BECAUSE:
https://nextjs.org/docs/basic-features/image-optimization#domains

The next documentation is not clear here so in this part it says:
"When loader is set to an external image service, this option is ignored."

So we consider it is the loader on next.config.js, but it isn't is the parameter on ReactComponent Image loader.

Solution:

I found the solution for my code, I'm using a lot of configuration so I didn't put this config as the last parameter of withPlugins.
Thanks to this guy I realized:
https://www.tutorialguruji.com/react-js/next-image-configuration-in-next-js-config-file/

[julioflima]

@RiyaGupta89

[monecchi]

@julioflima Thanks for the tip! The loader thing is indeed working on my code, in this case the images are being pulled from prismic.io servers and I can confirm they are optimized for responsiveness, cropping, quality etc (from their side though), nextjs is really doing nothing regarding optimization here, leading us to the placebo effect…

On the blog pages I was working on, I also have set the loader when opening the images on a lightbox like solution… I’m not using any plugins on next-config.js because I wanted to keep it clean, but that’s a long time since this discussion started, so I’ll have glimpse on nextjs recent updates and give it a try.

[SinghalAyushh]

Just use : images: {
domains: [
'localhost'

            ],
        },

It 'll solve Your issue

[mammosu]

<Image unoptimized src={imageUrl} ... />
Adding unoptimized property then works for me 🚀

[wellitongervickas]

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

[FDiskas]

Or hope that nextjs devs will improve this. In my case aws buckets with random names could solve this issue. example pr #27345

[itsanji]

I had the same issue, i go to this article which is in Nextjs Docs,
I did the change but nothing happend.
But then I realise that nextjs said that i MUST restart the server when I change next-config.js
so
Remember to reload the server manually

[steven-js]

Ah, thank you! Restart the server.

[richardpickett]

For folks asking for wildcard, here's my quick solution - I create a shell that puts in the image tag.

It doesn't do image optimization, etc, but I can add it if I want to.

One nice thing is it clearly calls out in the code when I'm expecting an external image.

Necessity is the mother of invention. I too am using google oath, I actually don't want to use a wildecard if it were an option, and I don't want a million domain entries.

components/externalImage.js:

import Image from "next/image";

export default function ExternalImage(props) {
  return <img {...props} />;
}

Usage:
pages/whatever.js:

...
          <ExternalImage src={currentUser.image} />
...

[adrianhorning08]

I just used and ignored the linter and everything seems fine 🤷‍♂️

[markcnunes]

Be sure you are running your tests with NODE_ENV=test e.g. "test": "NODE_ENV=test jest" if you are only getting this error while running tests.

#26502

[Tosinkoa]

I'm getting the error while running npm run dev

[OZZlE]

next.config.mjs:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    trailingSlash: true,
    images: {
        domains: ['localhost', 'example.com'],
        formats: ['image/webp', 'image/jpeg', 'image/png', 'image/gif'],
    },
}

export default nextConfig

"Error: Specified images.formats must be length 1 or 2, received length (4), please reduce the length of the array to continue."

.. and default eslint config doesn't allow me to use <img> ...

It works if you just ommit "formats" but then what's the point with that then?

[Tosinkoa]

Got it solved, thanks, I use the specify the url like this: abcdefgh.com
I also specify the width and height.

[Oskku]

https://nextjs.org/docs/messages/next-image-unconfigured-host here is the answer

[kornjiradej]

i just remove the prefix url 👍 work for me!!

images: { domains: [ 'https://www.google.com' ] }

to
images: { domains: [ 'google.com' ] }

[douglasmatosdev]

[SOLVED] for me!

@Arthur-bl-dev No need to install dependencies!!!

I was trying to use github avatar url.

The @miguelseguramx is right!

Just remove the protocol (https or http)

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['avatars.githubusercontent.com']
  }
}

module.exports = nextConfig

Navbar.tsx

  <Image
    width={48}
    height={48}
    src="https://avatars.githubusercontent.com/u/57239907?v=4"
    objectFit="cover"
    alt="Picture of the author"
    className="h-8 w-8 rounded-full"
/>

Note: Set the width and height because before I set these properties the image was not showing.

[umutbozdag]

I had to restart my server after I made changes to next.config.js because it didn't apply my newly added hostname.

[HNazmul-X]

why is this happening? do you know anything about this?

…

On Mon, Jun 13, 2022 at 2:11 AM Douglas Matos da Silva < ***@***.***> wrote: [SOLVED] for me! @Arthur-bl-dev <https://github.com/Arthur-bl-dev> No need to install dependencies!!! I was trying to use github avatar url. The @miguelseguramx <https://github.com/miguelseguramx> is right! Just remove the protocol (*https* or *http*) next.config.js /** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, images: { domains: ['avatars.githubusercontent.com'] }} module.exports = nextConfig Navbar.tsx <Image width={48} height={48} src="https://avatars.githubusercontent.com/u/57239907?v=4" objectFit="cover" alt="Picture of the author" className="h-8 w-8 rounded-full"/> *Note*: Set the width and height because before I set these properties the image was not showing. — Reply to this email directly, view it on GitHub <#18311 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARCUO3UNZDVGSPIXE2K67K3VOY77HANCNFSM4TB7ZFWA> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[AvivBenY]

this works for all domains

images: {
remotePatterns: [
{
protocol: "https",
hostname: "**",
},
],
}

[hmthu30]

images: {
remotePatterns: [
{
protocol: "https",
hostname: imgFrontendDomain,
port: "",
pathname: "",
},
{
protocol: "https",
hostname: imgStrapiDomain,
port: "",
pathname: "",
},
],
}, i want to dynamically fetch from .env how can i do?

[lazarok09]

declare it in the .env file and at hostname put process.env.ENV_NAME. Remember to add those same variables at your infra

[hmthu30]

doing with that flow but fail to deploy in UAT server
@lazarok09

[lazarok09]

Check if in your UAT server the .env file is available and have the variables you puted at your local enviroment

[sneko]

Despite the settings mentioned in other answers (I tested new ones images. remotePatterns and legacy ones images.domains), none was working.

After upgrading from v13.0.7 to v13.1.6 it works now :)

[cdpark0530]

Can anyone explain why Next.js decided to restrict referencing external images?

[timneutkens]

Because otherwise anyone can hijack your image optimization endpoint to resize images and you'd pay for it. The default is secure but you're not restricted in any way to allow "any url" using remotePatterns but in practice that is a risk. Wouldn't recommend it.