如何在 NextJS Image 组件中运行图像的 onLoad 函数

Posted

技术标签:

【中文标题】如何在 NextJS Image 组件中运行图像的 onLoad 函数【英文标题】:How to run a function onLoad of an image in NextJS Image component 【发布时间】:2021-04-25 00:05:32 【问题描述】:

我想在加载图像时显示骨架。我尝试在 NextJS 提供的新 Image 组件中传递 onLoad 道具,但该函数在图像加载之前触发。

这是我的代码

const [loaded, setLoaded] = useState(false);

<Image
  src=src
  alt=""
  className=styles.image_tag
  onLoad=(e) => setLoaded(true)
  style= opacity: loaded ? "1" : "0" 
  layout="fill"
/>

!loaded && (
  <Skeleton
    className=styles.skeleton
    variant="rect"
    animation="wave"
  />
)

【问题讨论】:

只有在加载为真时才应该显示图像。它始终显示在您的代码中 有什么方法可以优化 标签中的图片 【参考方案1】:

你可以像这样使用 onLoad 属性:

引用自https://github.com/vercel/next.js/discussions/20155

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>
)

************************************ 更新 ******** ************************

Nextjs 现在提供了一个 placeholerblurDataURL 属性,您可以使用它们在加载主图像之前显示图像占位符。

一个例子


<Image
 className="image"
 src=image.src
 alt=image.alt
 layout="fill"
 objectFit="cover"
 objectPosition="top center"
 placeholder="blur"
 blurDataURL="/images/blur.jpg"
/>

【讨论】:

【参考方案2】:

从 11.1 开始,您可以使用 onLoadingComplete

图像完成后调用的回调函数 已加载并且占位符已被删除。

https://nextjs.org/docs/api-reference/next/image#onloadingcomplete

【讨论】:

以上是关于如何在 NextJS Image 组件中运行图像的 onLoad 函数的主要内容,如果未能解决你的问题,请参考以下文章

NextJS v10 Image 组件在有 basePath 时无法提供图像

NextJS Image 组件没有响应我的内联 CSS

NextJS - 有没有办法在组件中运行服务器端查询?

如何在材质ui卡媒体中使用Next JS IMAGE

如何在 nextjs 组件中使用 next-auth?

NextJs中如何通过多层组件传递href值?