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 PhotoAlbum from "react-photo-album";
import NextJsImage from "./NextJsImage";
import photos from "./photos";
const Gallery = () => <PhotoAlbum layout="columns" photos={photos} renderPhoto={NextJsImage} />;
Next.js 13
import React from "react";
import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
const NextJsImage: React.FC<RenderPhotoProps> = ({
imageProps: { src, alt, title, sizes, className, onClick },
wrapperStyle,
}) => (
<div style={wrapperStyle}>
<div style={{ display: "block", position: "relative", width: "100%", height: "100%" }}>
<Image fill src={src} alt={alt} title={title} sizes={sizes} className={className} onClick={onClick} />
</div>
</div>
);
export default NextJsImage;
Next.js 12 and earlier
import React from "react";
import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
const NextJsImage: React.FC<RenderPhotoProps> = ({
imageProps: { src, alt, title, sizes, className, onClick },
wrapperStyle,
}) => (
<div style={wrapperStyle}>
<div style={{ display: "block", position: "relative", width: "100%", height: "100%" }}>
<Image layout="fill" src={src} alt={alt} title={title} sizes={sizes} className={className} onClick={onClick} />
</div>
</div>
);
export default NextJsImage;