klz-cables.com/lib/imgproxy-loader.ts

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,
  });
}