next.js - 如何在 next.js 中正确配置外部图像加载器？

Question

我正在使用 next.js 导出来创建托管在谷歌云存储上的静态 html 导出。

我在 next.js 配置中使用了这个解决方法。

images: {
 loader: 'imgix',
 path: 'https://noop/',
},

我如何需要配置一个外部加载器，例如 imgix 才能正常工作？

Answer 1

相对路径

images: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    loader: "imgix",
    path: "https://<account>.imgix.net/",
},

然后在你的组件中，

const imgSrc = "random.png";

<Image
     src={imgSrc} // <= https://<account>.imgix.net/random.png
     width={300}
     height={300}
     alt={alt}
   />

绝对路径

images: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    loader: "imgix",
    path: "",
},

然后在你的组件中，

const imgSrc = "https://<imagesource-domain>/random.png";

<Image
     src={imgSrc} // <= https://<imagesource-domain>/random.png
     width={300}
     height={300}
     alt={alt}
   />