我正在使用无状态功能组件在从外部资源加载图像时添加微调器,如下所示:
function ExternalImage(props) {
const [loaded, setLoaded] = useState(false);
function onLoad() {
console.log('loaded');
setLoaded(true);
}
return loaded
? <img
onLoad={onLoad}
src={props.src}
alt={props.alt}
{...props}
/>
: <Spin />
}
并像这样使用它:
<ExternalImage src={image.src} alt={image.alt} className="image" />
为什么
onLoad
永远不会被调用?
最佳答案
未加载图像时,您实际上并未渲染图像。您需要渲染它以使其 onLoad 触发
function ExternalImage(props) {
const [loaded, setLoaded] = useState(false);
function onLoad() {
console.log('loaded');
setLoaded(true);
}
return (
<>
<img
style={{display: loaded? 'block': 'none'}}
onLoad={onLoad}
src={props.src}
alt={props.alt}
{...props}
/>
{!loaded && <Spin /> }
</>
)
}
关于reactjs - 使用条件渲染时不会调用图像标签上的 React onLoad 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57162865/