[CustomImage] Add error default image

This commit is contained in:
jangheon Pyo
2024-07-18 19:17:58 +09:00
parent 6d33bf3d58
commit bbfd091c65

View File

@@ -7,8 +7,8 @@ import React, { memo, useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import css from "./CustomImage.module.less"; import css from "./CustomImage.module.less";
import defaultImageItem from "../../../assets/images/img-thumb-empty-144@3x.png";
//animationSpeed : "slow", "normal", "fast", "none" ==> 500ms, 250ms, 10ms, 0ms //animationSpeed : "slow", "normal", "fast", "none" ==> 500ms, 250ms, 10ms, 0ms
export default memo(function CustomImage({ export default memo(function CustomImage({
@@ -30,8 +30,8 @@ export default memo(function CustomImage({
const showImageJob = useRef(null); const showImageJob = useRef(null);
useEffect(() => { useEffect(() => {
if(src && src !== imgSrc){ if (src && src !== imgSrc) {
if(showImageJob.current){ if (showImageJob.current) {
clearTimeout(showImageJob.current); clearTimeout(showImageJob.current);
showImageJob.current = null; showImageJob.current = null;
} }
@@ -39,14 +39,14 @@ export default memo(function CustomImage({
setError(false); setError(false);
setImageLoaded(false); setImageLoaded(false);
} }
if(!src){ if (!src) {
setError(true); setError(true);
} }
}, [src]); }, [src]);
useEffect(() => { useEffect(() => {
return () => { return () => {
if(showImageJob.current){ if (showImageJob.current) {
clearTimeout(showImageJob.current); clearTimeout(showImageJob.current);
showImageJob.current = null; showImageJob.current = null;
} }
@@ -54,7 +54,7 @@ export default memo(function CustomImage({
}, []); }, []);
const _onLoad = useCallback(() => { const _onLoad = useCallback(() => {
if(showImageJob.current){ if (showImageJob.current) {
clearTimeout(showImageJob.current); clearTimeout(showImageJob.current);
} }
showImageJob.current = setTimeout(() => { showImageJob.current = setTimeout(() => {
@@ -72,12 +72,12 @@ export default memo(function CustomImage({
return ( return (
<img <img
className={classNames(css.customimage, className, css.error)} className={classNames(css.customimage, className, css.error)}
src={fallbackSrc || ""} src={fallbackSrc || defaultImageItem}
alt="" alt=""
/> />
); );
} }
if(!imgSrc || !src){ if (!imgSrc || !src) {
return null; return null;
} }
return ( return (