页面加载先显示默认图片，网络图片加载完成后替换的实现方案

阿华AIGC实验室

2026-5-14

实现默认占位图加载完成后替换为网络图片的方案

嘿，我来帮你搞定这个需求！咱们可以通过React的状态管理和图片预加载机制，轻松做到先显示本地默认图，等网络图片加载完成后再替换的效果，而且还能封装成自定义组件，用起来就像你想要的src1/src2那样方便。

核心思路

初始状态下，图片显示本地的默认图（src1对应的资源）
组件挂载后，后台创建一个Image对象去加载网络图片（src2的地址）
当网络图片加载成功时，更新组件状态，把显示的图片切换为网络图；如果加载失败，就保持默认图（也可以自定义错误处理逻辑）

具体实现代码

首先，咱们先封装一个可复用的自定义图片组件：

import { useState, useEffect } from 'react';
import defaultImg from './pics/default.jpg';

// 自定义图片组件，支持默认图和网络图的切换
const LazyLoadImage = ({ src1 = defaultImg, src2, alt = '' }) => {
  // 初始显示默认图
  const [currentSrc, setCurrentSrc] = useState(src1);

  useEffect(() => {
    // 如果没有传入网络图地址，直接返回
    if (!src2) return;

    // 创建一个Image实例来预加载网络图片
    const img = new Image();
    img.src = src2;

    // 图片加载成功时，切换显示的图片
    img.onload = () => {
      setCurrentSrc(src2);
    };

    // 可选：处理网络图片加载失败的情况，比如保持默认图或者显示错误图
    img.onerror = () => {
      console.error('网络图片加载失败，保持默认图');
      // 如果需要显示错误图，可以在这里setCurrentSrc(errorImg)
    };

    // 清理函数：组件卸载时取消图片加载
    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [src2, src1]);

  return <img src={currentSrc} alt={alt} />;
};

// 使用示例
const App = () => {
  const networkImgUrl = 'https://cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg';
  
  return (
    <div>
      <LazyLoadImage 
        src1={defaultImg} 
        src2={networkImgUrl} 
        alt="风力发电场" 
      />
    </div>
  );
};

export default App;