Как правильно настроить внешний загрузчик изображений в next.js?

Question

Я использую экспорт next.js для создания статического экспорта HTML, который размещается в облачном хранилище Google.

Я использую этот обходной путь в моей конфигурации 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}
   />