Next.js Discord

Discord Forum

hostname is not configured under images in your `next.config.js`

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
I'm using nextjs image component and the src becomes

https://vectorinterior.local/_next/image?url=http%3A%2F%2Fvectorinterior.local%2Fapi%2Fmedia%2Ffile%2F22.jpg&w=1280&q=75

But I get

Error: Invalid src prop (http://vectorinterior.local/api/media/file/22-3.jpg) on next/image, hostname "vectorinterior.local" is not configured under images in your next.config.js

So I added it

const nextConfig = {
images: {
deviceSizes: [640, 750, 828, 1024, 1280, 1440, 1920, 2048, 3840],
formats: ['image/webp'],
remotePatterns: [new URL('http://vectorinterior.local')],
},

But still get the same error so what's going on?
Answered by Masai Lion
Yeah that could have worked but I ended up going a different route.

Since nextjs is running inside a docker container it's trying to resolve the url to localhost (which I did setup with the hosts file in windows) and it obviously can't reach it.

I'm using payload cms as a backend and that's why the url is absolute instead of relative. To solve it I just created a thin wrapper around Next's Image component that removes the host from the url

import ReactImage from 'next/image'
import '@styles/skeleton.scss'

type ImageProps = React.ComponentPropsWithoutRef<typeof ReactImage>

export default function Image({ ...props }: ImageProps) {
  return (
    <ReactImage
      {...props}
      src={
        typeof props.src === 'string'
          ? props.src.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')
          : props.src
      }
      blurDataURL={props.blurDataURL?.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')}
    />
  )
}


Now everything loads just fine
View full answer

3 Replies

You don't need to specify deviceSizes unless you are going to change the default which you aren't in this case.

Also it looks like this is a local image via an API route? In that case you must use localPatterns not remotePatterns
and even if it was remotePatterns your configuration is incorrect it would need to be:
remotePatterns: [new URL('https://vectorinterior.local/api/media/**')]
@Plague You don't need to specify `deviceSizes` unless you are going to change the default which you aren't in this case. Also it looks like this is a local image via an API route? In that case you must use `localPatterns` not `remotePatterns`
Masai LionOP
Yeah that could have worked but I ended up going a different route.

Since nextjs is running inside a docker container it's trying to resolve the url to localhost (which I did setup with the hosts file in windows) and it obviously can't reach it.

I'm using payload cms as a backend and that's why the url is absolute instead of relative. To solve it I just created a thin wrapper around Next's Image component that removes the host from the url

import ReactImage from 'next/image'
import '@styles/skeleton.scss'

type ImageProps = React.ComponentPropsWithoutRef<typeof ReactImage>

export default function Image({ ...props }: ImageProps) {
  return (
    <ReactImage
      {...props}
      src={
        typeof props.src === 'string'
          ? props.src.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')
          : props.src
      }
      blurDataURL={props.blurDataURL?.replace(process.env.NEXT_PUBLIC_PAYLOAD_URL || '', '')}
    />
  )
}


Now everything loads just fine
Answer