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