为什么remotePatterns通配符不适用于Next.js中的特定图像?

5n0oy7gb  于 2023-04-11  发布在  其他
关注(0)|答案(1)|浏览(302)

我使用newsapi.org和Nextjs图像组件。
要使用来自API的图像,我必须配置我的next.config.js以接受来自任何域的图像。一般来说,它可以工作,它适用于大多数域,但不久前我再次得到一个关于无效src属性的错误。我想这可能是.com后的点的问题/我真的不寻求帮助,因为我可以简单地保持我的conifig修改像我一样,但我想知道为什么通配符不对特定图像进行测试

Error: Invalid src prop (https://www.si.com/.image/ar_1.91%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cg_faces:center%2Cq_auto:good%2Cw_1200/MTk2ODA2NjcwMTU0NzM2NzAy/dawn-staley.jpg) on `next/image`, hostname "www.si.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

当我开始我的项目时,我的next.config.js看起来像这样

const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      }
    ],
  },
};

我也试着在路径名中添加通配符,但它不起作用。
它的工作原理,如果我添加一个第二个对象,看起来像这样

{
        protocol: "https",
        hostname: "www.si.com",
        port: "",
        pathname: "/.image/**",
      },
li9yvcax

li9yvcax1#

我也遇到了同样的问题。
首先,我认为这可能是Next.js部分的一个bug。这可能是一个相关的GitHub问题:https://github.com/vercel/next.js/issues/46903
不管怎样,我四处挖掘,想出了两个解决方案。
第一个更具体。添加此模式以允许以/.image开头的路径:

{
  protocol: "https",
  hostname: "**",
  pathname: "/.image/**",
}

第二个更一般一些。我推测问题在于路径名包含一个点.,当Next.js解析它时,发生了一些错误-可能是Next.js中的一个bug,也可能是故意的,这是处理它的方式,不确定。无论哪种方式,添加这个模式以允许路径名包含.

{
  protocol: "https",
  hostname: "**",
  pathname: "**/.*/**",
}

我认为即使是第二个选项也会失败,如果路径名像/.image/someStringHere/.data/dataId/imageName.jpg,因为它将有两个部分,点.,所以我认为这个解决方案不是一个确定的,但至少它是可行的。你可以尝试摆弄我提供的例子,也许你能想出一个更好的解决方案-如果你能找到一个更通用的解决方案,我将不胜感激。

相关问题