当前位置：首页 > VUE

vue实现图片缓存

2026-01-17 09:43:39VUE

实现图片缓存的方案

在Vue项目中实现图片缓存可以通过多种方式，以下列举几种常见且有效的方法：

使用Service Worker缓存图片

通过注册Service Worker实现离线缓存，利用Cache API存储图片资源。适用于PWA项目或需要离线访问的场景。

vue实现图片缓存

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    console.log('SW registered');
  });
}

// sw.js中缓存图片
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('image-cache').then(cache => {
      return cache.addAll([
        '/images/logo.png',
        '/images/banner.jpg'
      ]);
    })
  );
});

利用浏览器本地存储

对于小型图片，可转换为Base64后存入localStorage或sessionStorage。注意浏览器对存储大小的限制（通常5MB左右）。

// 将图片转为Base64存储
function cacheImageToLocalStorage(key, url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const reader = new FileReader();
      reader.onload = () => {
        localStorage.setItem(key, reader.result);
      };
      reader.readAsDataURL(blob);
    });
}

// 使用缓存的图片
const cachedImg = localStorage.getItem('cached-image');
if (cachedImg) {
  this.imageSrc = cachedImg;
}

使用HTTP缓存头

通过服务器配置强制缓存策略，适合静态资源。需在服务器（如Nginx）中设置响应头：

vue实现图片缓存

location ~* \.(jpg|jpeg|png|gif)$ {
  expires 365d;
  add_header Cache-Control "public, max-age=31536000";
}

内存缓存实现

在Vue组件中使用变量暂存已加载的图片，避免重复请求：

export default {
  data() {
    return {
      imageCache: {}
    };
  },
  methods: {
    loadImage(url) {
      if (this.imageCache[url]) return Promise.resolve(this.imageCache[url]);

      return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => {
          this.imageCache[url] = url;
          resolve(url);
        };
        img.src = url;
      });
    }
  }
}

第三方库解决方案

使用专门处理图片缓存的库如：

vue-lazyload：实现懒加载与缓存
lru-cache：LRU算法管理缓存
localforage：改进的本地存储方案

// 使用vue-lazyload示例
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 3,
  loaded: {
    checkCache(img) {
      return localStorage.getItem(img.src);
    }
  }
});