next/image loaderFile but fallback to default optimized loader

38 Views Asked by At

We serve some images using Imgix so we wanted to set a global loaderFile that can deal with those images as per this example. But other images on our app don't use Imgix, in that case we still want to use the built-in Image Optimization API.

next.config.js:

images: { 
 loader: 'custom',
 loaderFile: './.loaders/customImageLoader.js',
},

customImageLoader.js:

export default function ({ src, width, quality }) {
  if (!src.contains(IMGIX_DOMAIN)) return src;

  const url = new URL(src);
  const params = url.searchParams;
  params.set('auto', params.getAll('auto').join(',') || 'format');
  params.set('fit', params.get('fit') || 'max');
  params.set('w', params.get('w') || width.toString());
  params.set('q', quality.toString() || '50');
  return url.href;
}

Here if (!src.contains(IMGIX_DOMAIN)) return src; it should apply the built-in Image Optimization API, like calling "super()". Is that possible?

0

There are 0 best solutions below