hostname is not configured under images in your `next.config.js`
Answered
Masai Lion posted this in #help-forum
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?
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
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
Now everything loads just fine
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 urlimport 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
3 Replies
You don't need to specify
Also it looks like this is a local image via an API route? In that case you must use
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
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
Now everything loads just fine
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 urlimport 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