Nextjs throws error hostname is not configured but i have wild card

Answered

AM posted this in #help-forum

2024-03-24T15:54:37.000Z

Hello i have following config in next.config.mjs:

 images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [{ protocol: 'https', hostname: '**' }, { protocol: 'http', hostname: '**' }]
  },

but it fails to load image from here:

https://raw.githubusercontent.com/0xbarbs/showcase/master/.gitshowcase/images/0.png

why is throwing this error aren't this config able to support this hostname?

Answered by Ray

because the url contain a .

View full answer

44 Replies

AMOP

2024-03-24T15:58:41.000Z

full error:

Error: Invalid src prop (https://raw.githubusercontent.com/0xbarbs/showcase/master/.gitshowcase/images/0.png) on `next/image`, hostname "raw.githubusercontent.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

somehow wildcard is catching raw.githubusercontent.com?

AMOP

2024-03-24T16:04:43.000Z

cc @Ray ðŸ™

AMOP

2024-03-24T16:11:40.000Z

P.S.: I've also tried enabling it { protocol: 'https', hostname: 'raw.githubusercontent.com' } but error continues to persist

Ray

2024-03-24T16:15:17.000Z

because the url contain a .

Answer

AMOP

2024-03-24T16:15:39.000Z

this one here .gitshowcase?

Ray

2024-03-24T16:15:43.000Z

yeah

AMOP

2024-03-24T16:15:46.000Z

damn

how to by pass it any ideas

Ray

2024-03-24T16:16:08.000Z

use img instead

there was an issue about it on github I think

AMOP

2024-03-24T16:16:29.000Z

ahaa

just

i have a feed of items and i'm using Image, how i can fallback to img if Image is not working?

like will be tricky to check if url constains .

because is a url it contains it

Ray

2024-03-24T16:17:24.000Z

create a component for it

AMOP

2024-03-24T16:17:49.000Z

alright i do have it:

but if this Image fails to load how to plug <img />

Ray

2024-03-24T16:18:19.000Z

if (url.includes(".") {
  return <img src={url} />
}

return <Image src={url} />

AMOP

2024-03-24T16:18:35.000Z

yeah ok but i mean is a url, it always includes ('.')

ðŸ˜„

Ray

2024-03-24T16:19:22.000Z

maybe url.replace(".png", "").includes(".")

AMOP

2024-03-24T16:19:42.000Z

hm goota thing about it because you might have

www.host.ext

Ray

2024-03-24T16:20:25.000Z

new URL(url).pathname.replace(".png", "").includes(".")

AMOP

2024-03-24T16:20:31.000Z

or this one:

tttps://cast-sense.vercel.app/api/image?image=N4IgLghg5iBcIBMCWA3EAaEAHATgeywGc5RCwBPAGwFMSQJKkoA7ASTGoFtj4Bja5hxwYQAIwi8A1lHwBXZgjghGzahBwBaGRGQCwACjB4ABDiYALMOmMBiAKIBGRwDEAnNZvPndgMJ2AQgCUI...

hm thanks man i will check what URL returns but thanks