fedisearch/application/src/components/FallbackImage.tsx

27 wiersze
808 B
TypeScript

import React, { ImgHTMLAttributes, ReactElement, useEffect, useState } from 'react'
export default function FallbackImage ({
fallbackSrc,
src,
alt,
...props
}: ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc?: string }): ReactElement {
const [showFallback, setShowFallback] = useState<boolean>(false)
useEffect(() => {
setShowFallback(src === undefined || src === null || src === '')
}, [src])
const handleError = (event): void => {
if (props.onError != null) {
props.onError(event)
}
if (fallbackSrc === undefined || fallbackSrc === '') {
return
}
setShowFallback(true)
}
if (showFallback) {
return <img src={fallbackSrc} alt={alt} onError={handleError} {...props}/>
}
return <img src={src} alt={alt} onError={handleError} {...props}/>
}