next.js - Nextjs 图像组件提示主机未添加到配置中，但它是

Question

我有一个关于 Nextjs 的 weeeeeeird 问题，我将它连接到一个 cms (storyblok)，我使用的所有图像都来自那个地方。所有图像都工作正常，但现在我添加了一些新图像，但我不断收到主机未配置的错误，但它是!

错误:

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

组件，logoImg.filename 是 src url:

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

和配置:

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

此外，如果我执行以下操作:

1. 注释掉Image组件并保存
2. 刷新
3. 错误已消失页面加载
4. 现在取消注释图像组件并保存(不刷新)
5. 图像显示得很好!
6. 刷新->再次出错

Answer 1

我无意中在这里找到了答案:https://github.com/vercel/next.js/discussions/18311#discussioncomment-113194

无论出于何种原因，我的 Image 组件是从 "next/Image" 而不是 "next/image" 带有小 "i”，一旦我将导入更改为“next/image”，它就可以正常工作。