当前位置：首页 > React

react实现图片缓存

2026-01-26 10:55:51React

实现图片缓存的方案

在React中实现图片缓存可以通过多种方式完成，以下是几种常见的方法：

使用Service Worker缓存图片

Service Worker可以在浏览器后台运行，拦截网络请求并缓存资源。通过注册Service Worker，可以实现图片的离线缓存和快速加载。

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('ServiceWorker registration successful');
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}

在sw.js中定义缓存策略：

const CACHE_NAME = 'image-cache-v1';
const urlsToCache = [
  '/path/to/image1.jpg',
  '/path/to/image2.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

使用浏览器本地存储

对于少量图片，可以使用localStorage或IndexedDB进行缓存。这种方法适合缓存小尺寸的Base64编码图片。

// 存储图片
function cacheImage(key, imageUrl) {
  fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
      const reader = new FileReader();
      reader.onload = () => {
        localStorage.setItem(key, reader.result);
      };
      reader.readAsDataURL(blob);
    });
}

// 获取缓存图片
function getCachedImage(key) {
  return localStorage.getItem(key);
}

使用React组件实现内存缓存

创建一个高阶组件或自定义Hook来管理图片缓存状态：

import { useState, useEffect } from 'react';

function useImageCache(src) {
  const [cachedSrc, setCachedSrc] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setCachedSrc(src);
    };
  }, [src]);

  return cachedSrc;
}

// 使用示例
function CachedImage({ src, alt }) {
  const cachedSrc = useImageCache(src);
  return <img src={cachedSrc || src} alt={alt} />;
}

使用第三方库

现有成熟的库可以简化图片缓存实现：

react实现图片缓存

react-query：可以用于数据缓存，包括图片URL
lru-cache：实现LRU缓存策略
react-image：专门为React设计的图片处理库

import { useQuery } from 'react-query';
import { Img } from 'react-image';

function CachedImage({ src }) {
  const { data } = useQuery(['image', src], () => fetch(src).then(res => res.blob()));

  return data ? <img src={URL.createObjectURL(data)} /> : <Img src={src} />;
}