react 判断img加载完成

 
react 判断img加载完成

在React中，可以通过监听img元素的load事件来判断图片是否加载完成。以下是一个简单的例子：

   
import React, { useState, useRef } from ‘react’;  
const ImageLoader = () => {
const [imageLoaded, setImageLoaded] = useState(false);
const imgRef = useRef(null);  
const handleImageLoad = () => {
if (imgRef.current) {
setImageLoaded(true); } };  
return (
<div>
<img
ref={imgRef}
src=“path_to_your_image.jpg”
onLoad={handleImageLoad}
alt=“示例图片” /> {imageLoaded ? ‘图片加载完成’ : ‘图片加载中…’}
</div> ); };  
export default ImageLoader;

在这个例子中，我们使用了React的useRef来获取DOM元素的引用，并通过onLoad事件处理器handleImageLoad来更新状态，指示图片加载完成。imageLoaded状态变量用于在图片加载完成后显示相应的消息。

提示：AI自动生成，仅供参考