Skip to content

Instantly share code, notes, and snippets.

@codegino
Last active Nov 17, 2021
Embed
What would you like to do?
Next Image with placeholder and error handler
function CustomImage({...props}: ImageProps) {
const [src, setSrc] = React.useState(props.src);
return (
<Image
onError={() => setSrc('/assets/image-error.png')}
placeholder="blur"
blurDataURL="/assets/image-placeholder.png"
{...props}
src={src}
/>
);
}
import Image, {ImageProps} from 'next/image';
function CustomImage({alt, ...props}: ImageProps) {
const [src, setSrc] = React.useState(props.src);
return (
<Image
{...props}
src={src}
alt={alt}
onError={() => setSrc('/assets/image-error.png')}
placeholder="blur"
blurDataURL="/assets/image-placeholder.png"
/>
);
}
import React from 'react';
import { CustomImage } from '../components/CustomImage';
export default function IndexPage() {
return (
<CustomImage
src="https://i.imgur.com/gf3TZMr.jpeg"
layout="fixed"
height={500}
width={700}
alt={'alt'}
/>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment