Nextjs 图像组件 - 远程图像答案

【问题标题】：Nextjs Image Component - Remote ImagesNextjs 图像组件 - 远程图像
【发布时间】：2022-12-30 06:39:37
【问题描述】：

我是 nextjs 的新手，遇到过图像组件问题。我也检查了一下，似乎有类似的问题，但没有一个有给定的场景。

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

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

布，亚历克斯。

下一步.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 prop (https://swiperjs.com/demos/images/nature-1.jpg)，next.config.js 中的图像下未配置主机名“swiperjs.com” 查看更多信息：https://nextjs.org/docs/messages/next-image-unconfigured-host

【问题讨论】：

标签： next.js host

【解决方案1】：

该配置应该有效。请注意，您必须通过重新运行 yarn run dev 或 npm run dev 来重新启动开发服务器，以使这些配置更改生效。

【讨论】：

是的，我确实重启了服务器，但没有任何运气来解决这个问题。

【解决方案2】：

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

npm outdated

并更新了 package.json 并运行

npm run install:clean

【讨论】：

更新了软件包，但仍然没有运气。因同样的问题而失败。

【解决方案3】：

试着留下：

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

【讨论】：