Reactjs 如何在NextJS图像组件中运行图像加载函数

我想在加载图像时显示骨架。我试图在NextJS提供的新

图像

组件中传递

onLoad

属性，但函数在图像加载前启动

这是我的密码

const[loaded，setLoaded]=useState（false）；
setLoaded（true）}
样式={{不透明度：已加载？“1”：“0”}
布局={“填充”}
/>
{！已加载&&(
)}

您可以像这样使用onLoad道具：

引用自

const[isImageReady，setIsImageReady]=useState（false）；
const onLoadCallBack=（e）=>{
setIsImageReady（真）
加载类型==“函数”&&onLoad（e）
}
返回(
{！isImageReady&“正在加载图像…”
)

图像应仅在loaded为true时显示。它总是在你的代码中显示。有什么方法可以优化标签中的图像吗

const [isImageReady, setIsImageReady] = useState(false);

const onLoadCallBack = (e)=>{
   setIsImageReady(true)
   typeof onLoad === "function" && onLoad(e)
}

return(
  <div>
   {!isImageReady && 'loading image...'}
   <Image 
     onLoad={onLoadCallBack} 
     src={'/'+image} 
     alt={title} 
     width={260}  
     height={160} />
  </div>
)