add: fallback feature to image

src/lib/components/image/index.tsx

@@ -1,5 +1,7 @@
-import type { CSSProperties, HTMLAttributes, HTMLProps } from 'react'
+import type { CSSProperties, HTMLAttributes, HTMLProps, SyntheticEvent } from 'react'
+import { useEffect, useState } from 'react'
 import { getIpfsURL } from '../../utils/ipfs'
+import { DEFAULT_FALLBACK_IMAGE } from '../../const/images'
 
 export interface IpfsImageProps extends HTMLAttributes<HTMLImageElement> {
   hash: string
@@ -10,34 +12,47 @@ export interface IpfsImageProps extends HTMLAttributes<HTMLImageElement> {
   lazy?: boolean
   style?: CSSProperties
   className?: HTMLProps<HTMLElement>['className']
+  fallbackImage?: string
 }
 
 export const ImageIPFS = ({
   hash,
   gateway,
-  width,
-  height,
-  alt,
+  width = 100,
+  height = 100,
+  alt = 'IPFS Image',
   lazy,
   style,
   className,
+  fallbackImage = DEFAULT_FALLBACK_IMAGE,
   ...props
 }: IpfsImageProps): JSX.Element => {
-  const imgSrc = getIpfsURL(gateway, hash)
-  const imgWidth = width ?? 100
-  const imgHeight = height ?? 100
-  const imgAlt = alt ?? 'IPFS Image'
   const imgLoading = lazy === true ? 'lazy' : 'eager'
+  const [imgSrc, setImgSrc] = useState<string>('')
+
+  useEffect(() => {
+    const imgSrcCleaned = getIpfsURL(gateway, hash)
+    setImgSrc(imgSrcCleaned)
+  }, [hash, gateway])
+
+  const handleOnError = (e: SyntheticEvent<HTMLImageElement, Event>): void => {
+    if (e.type === 'error') {
+      setImgSrc(fallbackImage)
+    }
+  }
 
   return (
     <img
       src={imgSrc}
-      alt={imgAlt}
-      width={imgWidth}
-      height={imgHeight}
+      alt={alt}
+      width={width}
+      height={height}
       style={style}
       className={className}
       loading={imgLoading}
+      onError={(e) => {
+        handleOnError(e)
+      }}
       {...props}
     />
   )