Nextjs 图像组件 - 远程图像

Question

我对 nextjs 非常陌生，并且遇到了 Image 组件问题。我也查了一下，似乎有类似的问题，但没有一个有给定的场景。

我正在尝试通过图像组件从远程源加载图像。该文档指出您应该调整 next.config.js 文件以允许远程图像。由于我使用的是下一个 13.0.3 版本，所以我使用 images.remotePatterns 属性。尽管如此，我仍然收到主机名未配置的错误。

你能建议我做错了什么以及如何克服这个问题吗？

兄弟， 亚历克斯。

next.config.js

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'swiperjs.com',
        port: '',
        pathname: '/demos/images/**',
      }
    ],
  },

Usage:
        <Image
          src="https://swiperjs.com/demos/images/nature-1.jpg"
          className={styles.swiperslideimg}
          alt="test" width={400} height={400}/>

错误： next/image 上的 src 属性 (

https://swiperjs.com/demos/images/nature-1.jpg

) 无效，主机名“swiperjs.com”未在您的

next.config.js

中的图像下配置 查看更多信息：https://nextjs.org/docs/messages/next-image-unconfigured-host

Answer 1

尝试只保留这一点：

images: {
    remotePatterns: [
      {
        hostname: 'swiperjs.com',
      }
    ],
},

Answer 2

该配置应该可以工作。请注意，您必须通过重新运行

yarn run dev

或

npm run dev

来重新启动开发服务器才能使这些配置更改生效。

Answer 3

我遇到了同样的问题并找到了我正在使用的解决方案 Notus NextJS 其中有一个稍微旧版本的 nextjs 所以我跑了

npm outdated

并更新了 package.json 并运行

npm run install:clean

Answer 4

您应该添加前缀“www”。 到你的主机名。像这样

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.swiperjs.com',
        port: '',
        pathname: '/demos/images/**',
      }
    ],
  },