diff --git a/components/LazyImage.js b/components/LazyImage.js index 4e353ad8..73a20f89 100644 --- a/components/LazyImage.js +++ b/components/LazyImage.js @@ -20,6 +20,8 @@ export default function LazyImage({ style }) { const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH') + const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') + const imageRef = useRef(null) const [adjustedSrc, setAdjustedSrc] = useState( placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') @@ -37,6 +39,14 @@ export default function LazyImage({ onLoad() // 触发传递的onLoad回调函数 } } + /** + * 图片加载失败回调 + */ + const handleImageError = () => { + if (imageRef.current) { + imageRef.current.src = defaultPlaceholderSrc + } + } useEffect(() => { const adjustedImageSrc = adjustImgSize(src, maxWidth) @@ -71,7 +81,8 @@ export default function LazyImage({ ref: imageRef, src: priority ? adjustedSrc : placeholderSrc, alt: alt, - onLoad: handleImageLoad + onLoad: handleImageLoad, + onError: handleImageError // 添加onError处理函数 } if (id) {