如何将MUI Skeleton用作Next.js Image的加载组件？

要实现用MUI的Skeleton作为Next.js Image的加载占位，核心是通过状态跟踪图片加载状态，结合条件渲染来切换Skeleton和图片的显示。以下是具体实现方案：

步骤1：引入依赖组件 #

首先导入需要的组件和状态钩子：

import Image from 'next/image';
import Skeleton from '@mui/material/Skeleton';
import { useState } from 'react';

步骤2：修改自定义Image组件 #

在原有自定义Image组件基础上，添加加载状态管理，通过onLoadingComplete回调更新状态，实现Skeleton和图片的切换：

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

const MyImage = () => {
  // 初始设为加载中状态
  const [isLoading, setIsLoading] = useState(true);

  return (
    // 外层容器设相对定位，保证占位和图片位置重叠
    <div style={{ position: 'relative', width: 500, height: 500 }}>
      {/* 加载中显示与图片尺寸一致的Skeleton */}
      {isLoading && (
        <Skeleton variant="rectangular" width={500} height={500} />
      )}
      {/* 图片加载完成后显示，同时更新状态 */}
      <Image
        loader={myLoader}
        src="me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        onLoadingComplete={() => setIsLoading(false)}
        style={{ display: isLoading ? 'none' : 'block' }}
      />
    </div>
  );
};

export default MyImage;

关键点说明 #

• 状态控制：用useState维护isLoading状态，图片加载完成时通过onLoadingComplete回调切换状态
• 布局稳定：外层容器设相对定位，让Skeleton和Image在同一位置渲染，避免加载完成后出现布局跳动
• 尺寸匹配：Skeleton的宽高必须和Image完全一致，保证占位效果的视觉一致性

适配动态尺寸（可选） #

如果需要支持动态传递宽高参数，可以将尺寸作为props传入组件：

const MyImage = ({ src, alt, width, height }) => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div style={{ position: 'relative', width, height }}>
      {isLoading && (
        <Skeleton variant="rectangular" width={width} height={height} />
      )}
      <Image
        loader={myLoader}
        src={src}
        alt={alt}
        width={width}
        height={height}
        onLoadingComplete={() => setIsLoading(false)}
        style={{ display: isLoading ? 'none' : 'block' }}
      />
    </div>
  );
};

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