Next/Image Wordpress Loader

example.jsx

// Dans Wordpress
// [16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 2880, 3840].forEach(width => {
//   ratios.forEach(ratio => {
//     add_image_size(`${ratio}-cool`, width, ratio.h * width / ratio.w );
//   });
// });

import useDimensions from "react-cool-dimensions";

const loader = ({ src, width }) => {
  //F.ex src = "http://content.luxurytribune.com/app/uploads/2021/04/HôtelUn.jpg|16|9"

  const [original, w, h] = src.split('|');
  const height = Math.floor(+h * width / +w);
  return `${original.replace('.jpg', '')-${width}x${height}.jpg}`
}

const MyImage = ({ src, width, height }) => {
  const { observe, width } = useDimensions<HTMLDivElement | null>();

  return (
    <Image
      loader={loader}
      src={[src, width, height].join('|')}
      alt="Picture of the author"
      width={width}
      height={height}
      layout="responsive"
      sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
    />
  )
}

// Example
<MyImage
  src={data.originUrl}
  width={16}
  height={9}
/>