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; } // Check if src contains custom gravity query parameter let gravity = 'sm'; // Use smart gravity (content-aware) by default let cleanSrc = src; try { // Dummy base needed for relative URLs const url = new URL(src, 'http://localhost'); const customGravity = url.searchParams.get('gravity'); if (customGravity) { gravity = customGravity; url.searchParams.delete('gravity'); cleanSrc = src.startsWith('http') ? url.href : url.pathname + url.search; } } catch (e) { // Fallback if parsing fails } // We use the width provided by Next.js for responsive images // Height is set to 0 to maintain aspect ratio return getImgproxyUrl(cleanSrc, { width, resizing_type: 'fit', gravity, }); }