diff --git a/src/components/atoms/FallbackImgImage.tsx b/src/components/atoms/FallbackImgImage.tsx index 5e16d708..d482f9b7 100644 --- a/src/components/atoms/FallbackImgImage.tsx +++ b/src/components/atoms/FallbackImgImage.tsx @@ -1,9 +1,9 @@ import React from "react"; -import { ImageProps } from "next/image"; +import Image, { ImageProps, StaticImageData } from "next/image"; import styled, { css } from "styled-components"; interface FallbackImgImageProps extends ImageProps { - fallbackSrc: string; + fallbackSrc: string | StaticImageData; alt: string; sizes?: string; rounded?: boolean; @@ -20,19 +20,24 @@ const FallbackImgImage = ({ rounded, ...props }: FallbackImgImageProps) => { - const [imgSrc, setImgSrc] = React.useState(""); + const [isError, setIsError] = React.useState(false); - React.useEffect(() => { - setImgSrc(src); - }, [src]); - - return ( + return isError ? ( setIsError(true)} + isrounded={rounded?.toString()} + /> + ) : ( + setImgSrc(fallbackSrc)} + onError={() => setIsError(true)} isrounded={rounded?.toString()} /> ); @@ -55,4 +60,21 @@ const StyledImage = styled.img<{ `} `; +const StyledFallbackImage = styled(Image)<{ + isshouldhide?: boolean; + isrounded?: string; +}>` + height: auto; + ${({ isshouldhide }) => + isshouldhide && + css` + display: none; + `} + ${({ isrounded }) => + isrounded === "true" && + css` + border-radius: 50%; + `} +`; + export default FallbackImgImage;