Next.js Image实现图片加载显黑色 加载完成后淡入过渡效果

直接利用Next.js Image原生API配合CSS即可实现，无需引入第三方依赖，全版本兼容。

核心实现逻辑 #

• 给Image组件外层套一个和图片尺寸一致的容器，设置纯黑背景作为加载阶段的占位，同时避免图片加载前后的布局偏移
• 图片初始透明度设为0，给透明度属性加CSS过渡，控制淡入动画的时长和缓动效果
• 监听Image组件原生的onLoadingComplete回调，等图片完全加载解码完成后，更新状态把图片透明度切为1，触发平滑淡入

完整实现代码 #

// Next.js 13+ App Router 下使用需要保留顶部的'use client'指令，Pages Router可删除
'use client'
import { useState } from 'react'
import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  const [imgLoaded, setImgLoaded] = useState(false)

  return (
    <div className="relative w-[500px] h-[500px] bg-black">
      <Image
        loader={myLoader}
        src="me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        className={`object-cover transition-opacity duration-500 ease-out ${
          imgLoaded ? 'opacity-100' : 'opacity-0'
        }`}
        onLoadingComplete={() => setImgLoaded(true)}
      />
    </div>
  )
}

export default MyImage

适配说明 #

如果你没有使用Tailwind CSS，直接写原生CSS即可，核心样式参考：

/* 图片外层容器 */
.img-container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #000;
}
/* 图片基础样式 */
.fade-in-img {
  object-fit: cover;
  transition: opacity 500ms ease-out;
}
/* 透明度状态类 */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

注意事项 #

• 不要给Image组件设置placeholder="blur"属性，否则会优先显示内置的模糊占位层，覆盖黑色背景效果
• 淡入时长可以根据业务需求调整，一般300ms-700ms的视觉体验最自然
• 如果需要做响应式适配，可以把外层容器改成用aspect-ratio控制比例，给Image加fill属性即可适配不同屏幕尺寸
• onLoadingComplete会在图片完全下载并解码完成后才触发，不会出现图片半加载就开始淡入的问题

内容的提问来源于stack exchange，提问作者Barty