如何在React项目中用Unsplash的blur_hash实现图片加载占位符？

核心思路是通过状态跟踪图片加载状态，让BlurHash占位符和原图重叠布局，原图加载完成后隐藏占位符。具体实现步骤如下：

1. 维护图片加载状态 #

用useState创建一个集合，记录已经加载完成的图片ID：

import { useState } from 'react';

// 组件内部初始化状态
const [loadedImageIds, setLoadedImageIds] = useState(new Set());

2. 布局与样式处理 #

给图片项添加容器，让BlurHash和原图重叠显示，添加以下CSS：

.image-container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.image-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
}

3. 整合渲染逻辑 #

修改你原来的图片渲染代码，加入BlurHash占位符和加载状态判断：

<ul>
  {images.map((image) => {
    const isLoaded = loadedImageIds.has(image.id);
    return (
      <li key={image.id}>
        <div className="image-container">
          {/* 占位符：图片未加载完成时显示 */}
          {!isLoaded && (
            <Blurhash
              hash={image.blur_hash}
              width={400}
              height={300}
              resolutionX={32}
              resolutionY={32}
              punch={1}
            />
          )}
          {/* 原图：加载完成后平滑淡入 */}
          <img
            src={image.urls.thumb}
            alt={image.alt_description || 'Unsplash图片'}
            onLoad={() => {
              setLoadedImageIds(prev => new Set([...prev, image.id]));
            }}
            style={{ opacity: isLoaded ? 1 : 0, transition: 'opacity 0.3s ease' }}
          />
        </div>
      </li>
    );
  })}
</ul>

补充说明 #

• 给img添加了过渡动画，原图加载完成后会平滑淡入，提升视觉体验
• 用图片的id作为状态标识，确保每个图片的加载状态独立
• 如果你的图片数据没有id字段，可以用blur_hash或urls.thumb作为唯一标识（id是最可靠的选择）

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