Marc Mintel
f7c743b69c
- 'fv' requires ML modules not present in standard imgproxy image - 'sm' is robust and supported everywhere - Fixes broken images on staging using Next.js Image loader
34 lines
1016 B
TypeScript
34 lines
1016 B
TypeScript
import { getImgproxyUrl } from './imgproxy';
|
|
|
|
/**
|
|
* Next.js Image Loader for imgproxy
|
|
*
|
|
* @param {Object} props - properties from Next.js Image component
|
|
* @param {string} props.src - The source image URL
|
|
* @param {number} props.width - The desired image width
|
|
* @param {number} props.quality - The desired image quality (ignored for now as imgproxy handles it)
|
|
*/
|
|
export default function imgproxyLoader({
|
|
src,
|
|
width,
|
|
_quality,
|
|
}: {
|
|
src: string;
|
|
width: number;
|
|
_quality?: number;
|
|
}) {
|
|
// Skip imgproxy for SVGs as they are vectors and don't benefit from resizing,
|
|
// and often cause 404s if the source is not correctly resolvable by imgproxy.
|
|
if (src.toLowerCase().endsWith('.svg')) {
|
|
return src;
|
|
}
|
|
|
|
// We use the width provided by Next.js for responsive images
|
|
// Height is set to 0 to maintain aspect ratio
|
|
return getImgproxyUrl(src, {
|
|
width,
|
|
resizing_type: 'fit',
|
|
gravity: 'sm', // Use smart gravity (content-aware) instead of face detection (requires ML)
|
|
});
|
|
}
|