2

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?

sonium
  • 918
  • 1
  • 11
  • 25

1 Answers1

3

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}
   />
PsyGik
  • 3,535
  • 1
  • 27
  • 44
  • Ok, but this means random.png must be uploaded to imgix seperatly, correct? I always thought nextjs will optimize images at compile time. – sonium Jul 28 '21 at 17:44
  • Yes and no. If you want to use a cloud provider to optimize images instead of using the Next.js' built-in Image Optimization, you can configure the loader and path prefix. i.e imgix – PsyGik Jul 28 '21 at 17:47