[CustomImage] Add error default image
This commit is contained in:
@@ -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 (
|
||||||
|
|||||||
Reference in New Issue
Block a user