How can I configure an external image loader in next.js properly?

Question

I'm using next.js export to create a static html export which is hosted on google cloud storage.

I use this workaround in my next.js configuration.

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

How do I need to configure an external loader e.g. imgix properly to work?

Answer 1

Relative Path

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

Then in your component,

const imgSrc = "random.png";

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

Absolute Path

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

Then in your component,

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

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