仅当组件内的图像成功加载时渲染组件

Question

如何延迟“我最喜欢的图像”（以及组件的其余部分）的渲染，直到图像成功加载，这需要一些时间。

这是我目前尝试过的：

function ProjectCardView(props) {

    const [isImageLoaded, setIsImageLoaded] = useState(false)
    let imgTag = <img onLoad={() => {setIsImageLoaded(true)}} src={props.imgSrc}/>

    if (!isImageLoaded) {
        return <div></div>
    }

    return (
        <div>
            <h1> My favorite image </h1>
            {imgTag}
            
        </div>
    )
}

此尝试的问题是整个组件从未出现。

Answer 1

您正在使用此代码中的条件渲染组件。

if (!isImageLoaded) {
  return <div></div>
}

这将在页面上执行一个空 div。所以你不会在 UI 上找到任何东西，甚至连 img 标签也找不到。您需要先渲染图像，然后才会更新您的状态变量。

检查这个沙盒。我正在加载图像时打印 loading，完成后打印 loaded。只需根据您的图片加载时间更新您的条件。

仅当组件内的图像成功加载时渲染组件

Render a component ONLY WHEN the image inside the component successfully loads

reactjs

react-hooks