Fallback image component

Fallback image component that uses Next.js image to render a placeholder when an image throws and error from a broken or missing link.

import { useEffect, useState } from 'react'
import Image from 'next/image'
export const FallbackImage = ({ src, ...rest }) => {
const [imgSrc, setImgSrc] = useState(src)
useEffect(() => {
}, [src])
return (
src={imgSrc ? imgSrc : '/images/not-found.png'}
onError={() => {

How to use

Use this component like you would the Next.js component, passing in the required props outlined in the Next.js image documentation. Then include an image you'd like to use as a fallback in the public folder in your Next.js application.