当前位置：首页 > VUE

vue实现图片缓存

2026-02-18 02:17:46VUE

实现图片缓存的方案

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

使用浏览器缓存机制

通过HTTP缓存头（如Cache-Control）让浏览器自动缓存图片资源。在服务器配置中为图片资源设置合适的缓存策略，例如：

Cache-Control: max-age=31536000

使用Service Worker缓存

注册Service Worker并缓存图片资源，实现离线可用和快速加载：

// 在main.js或单独文件中
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    console.log('SW registered');
  });
}

sw.js文件内容示例：

const CACHE_NAME = 'image-cache-v1';
const urlsToCache = [
  '/static/logo.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存储：

// 将图片转换为Base64
function getBase64(url) {
  return fetch(url)
    .then(response => response.blob())
    .then(blob => new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    }));
}

// 存储到localStorage
getBase64('image.jpg').then(base64 => {
  localStorage.setItem('cached-image', base64);
});

使用第三方库

考虑使用专门处理缓存的库如：

lru-cache：LRU缓存策略实现
localforage：封装IndexedDB的友好API

Vue组件中使用缓存图片

vue实现图片缓存

<template>
  <img :src="cachedImage" alt="Cached Image">
</template>

<script>
export default {
  data() {
    return {
      cachedImage: ''
    }
  },
  created() {
    const cached = localStorage.getItem('cached-image');
    if (cached) {
      this.cachedImage = cached;
    } else {
      getBase64('image.jpg').then(base64 => {
        localStorage.setItem('cached-image', base64);
        this.cachedImage = base64;
      });
    }
  }
}
</script>