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 easily accomplish this with the renderPhoto
function:
import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
export default function NextJsImage({
imageProps: { src, alt, title, sizes, className, onClick },
wrapperStyle,
}: RenderPhotoProps) {
return (
<div style={wrapperStyle}>
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<Image
fill
src={src}
alt={alt}
title={title}
sizes={sizes}
className={className}
onClick={onClick}
/>
</div>
</div>
);
}
import PhotoAlbum from "react-photo-album";
import NextJsImage from "./NextJsImage";
import photos from "./photos";
export default function Gallery() {
return <PhotoAlbum layout="columns" photos={photos} renderPhoto={NextJsImage} />;
}