Nextjs 圖像組件 - 遠程圖像

Question

我是 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 ) 無效，主機名“swiperjs.com”未在next.config.js的圖像下配置查看更多信息: https://nextjs.org/docs/messages/next-image-unconfigured-host

Answer 1

該配置應該可以工作。 請注意，您必須通過重新運行yarn run dev或npm run dev來重新啟動開發服務器，以使這些配置更改生效。

Answer 2

我遇到了同樣的問題並找到了我使用的Notus NextJS的解決方案，它的 nextjs 版本稍舊，所以我運行了

npm outdated

並更新了 package.json 並運行

npm run install:clean

Answer 3

試着留下：

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