mango-v4-ui/components/shared/LogoWithFallback.tsx

41 lines
680 B
TypeScript
Raw Normal View History

2022-12-09 14:58:49 -08:00
import Image from 'next/image'
import { ReactElement, useEffect, useState } from 'react'
const LogoWithFallback = ({
fallback,
alt,
src,
...props
}: {
fallback: ReactElement
alt: string
src: string
[x: string]: string | boolean | ReactElement
}) => {
const [error, setError] = useState(false)
useEffect(() => {
setError(false)
}, [src])
return (
<>
{!error ? (
<Image
alt={alt}
onError={(e) => {
console.error('error', e)
setError(true)
}}
src={src}
{...props}
/>
) : (
fallback
)}
</>
)
}
export default LogoWithFallback