4

I have a weeeeeeird issue with Nextjs, I have it connected to a cms (storyblok) and all images that I use come from that place. All images work just fine, but now I added a few new ones and I keep getting the error that the host is not configured, but it is!

Error:

Error: Invalid src prop (https://a.storyblok.com/f/130657/88x88/f37f10e611/giantstitanslogo.png) on `next/image`, hostname "a.storyblok.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Component, logoImg.filename is the src url:

      <Image
        src={logoImg.filename}
        alt={logoImg.alt}
        width={logoImgDimensions.width}
        height={logoImgDimensions.height}
        layout="responsive"
      />

And the config:

module.exports = {
  images: {
    domains: ["a.storyblok.com"],
  },
  experimental: { esmExternals: true },
};

Also if I do the following:

  1. Comment out the Image component and save
  2. Refresh
  3. Error is gone page loads
  4. Now uncomment the Image component and save (without refresh)
  5. The images show up just fine!
  6. Refresh -> error again
Darkbound
  • 3,026
  • 7
  • 34
  • 72

1 Answers1

3

I accidently found the answer here: https://github.com/vercel/next.js/discussions/18311#discussioncomment-113194

For whatever reason my Image component was imported from "next/Image" not "next/image" image with small "i", once I changed the import to "next/image" it worked just fine.

Darkbound
  • 3,026
  • 7
  • 34
  • 72