Next.js Image

If your project is based on Next.js and you'd like to use the next/image component instead of the standard <img> element, you can accomplish this with custom render function.

The example below makes use of placeholder="blur" instead of showing a spinner.

Next.js 13

import Image from "next/image";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

import image1 from "../../public/images/image01.jpeg";
import image2 from "../../public/images/image02.jpeg";
import image3 from "../../public/images/image03.jpeg";

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={[image1, image2, image3]}
  render={{
    slide: (image, offset, rect) => {
      const width = Math.round(Math.min(rect.width, (rect.height / image.height) * image.width));
      const height = Math.round(Math.min(rect.height, (rect.width / image.width) * image.height));

      return (
        <div style={{ position: "relative", width, height }}>
          <Image
            fill
            src={image}
            loading="eager"
            placeholder="blur"
            alt={"alt" in image ? image.alt : ""}
            sizes={
              typeof window !== "undefined"
                ? `${Math.ceil((width / window.innerWidth) * 100)}vw`
                : `${width}px`
            }
          />
        </div>
      );
    }
  }}
/>

Next.js 12 and earlier

import Image from "next/image";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

import image1 from "../../public/images/image01.jpeg";
import image2 from "../../public/images/image02.jpeg";
import image3 from "../../public/images/image03.jpeg";

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={[image1, image2, image3]}
  render={{
    slide: (image, offset, rect) => {
      const width = Math.round(Math.min(rect.width, (rect.height / image.height) * image.width));
      const height = Math.round(Math.min(rect.height, (rect.width / image.width) * image.height));

      return (
        <div style={{ position: "relative", width, height }}>
          <Image
            src={image}
            layout="fill"
            loading="eager"
            placeholder="blur"
            objectFit="contain"
            alt={"alt" in image ? image.alt : ""}
            sizes={
              typeof window !== "undefined"
                ? `${Math.ceil((width / window.innerWidth) * 100)}vw`
                : `${width}px`
            }
          />
        </div>
      );
    }
  }}
/>

Live Demo