当前位置：首页 > VUE

vue实现图片缓存

2026-03-30 02:49:40VUE

实现图片缓存的方案

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

使用浏览器本地存储（LocalStorage/SessionStorage）

将图片转换为Base64格式并存储在本地存储中，适用于小尺寸图片。Base64编码会增加约33%的体积，因此不建议用于大图。

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

// 从缓存中获取图片
function getCachedImage(url) {
  return localStorage.getItem(url) || url
}

使用Service Worker实现离线缓存

Service Worker可以拦截网络请求并缓存响应，适合渐进式Web应用(PWA)。

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

// sw.js文件内容
const CACHE_NAME = 'image-cache-v1'
const urlsToCache = [
  '/static/images/logo.png',
  '/static/images/banner.jpg'
]

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))
  )
})

使用IndexedDB存储大型二进制数据

对于需要缓存大量图片或大尺寸图片，IndexedDB是更好的选择。

// 打开或创建IndexedDB数据库
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('ImageCacheDB', 1)

    request.onupgradeneeded = event => {
      const db = event.target.result
      if (!db.objectStoreNames.contains('images')) {
        db.createObjectStore('images', { keyPath: 'url' })
      }
    }

    request.onsuccess = event => resolve(event.target.result)
    request.onerror = event => reject(event.target.error)
  })
}

// 存储图片到IndexedDB
async function storeImage(url, blob) {
  const db = await openDB()
  const tx = db.transaction('images', 'readwrite')
  tx.objectStore('images').put({ url, blob })
}

// 从IndexedDB获取图片
async function getImage(url) {
  const db = await openDB()
  return new Promise((resolve, reject) => {
    const tx = db.transaction('images', 'readonly')
    const request = tx.objectStore('images').get(url)
    request.onsuccess = () => resolve(request.result?.blob)
    request.onerror = () => reject(request.error)
  })
}

Vue组件中实现图片缓存的示例

在Vue组件中，可以结合上述方法实现图片缓存功能：

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

<script>
export default {
  props: ['url'],
  data() {
    return {
      imageSrc: ''
    }
  },
  async created() {
    const cachedImage = await this.getCachedImage(this.url)
    if (cachedImage) {
      this.imageSrc = URL.createObjectURL(cachedImage)
    } else {
      this.imageSrc = this.url
      this.cacheImage(this.url)
    }
  },
  methods: {
    async cacheImage(url) {
      const response = await fetch(url)
      const blob = await response.blob()
      await storeImage(url, blob) // 使用前面定义的IndexedDB存储方法
    },
    async getCachedImage(url) {
      return await getImage(url) // 使用前面定义的IndexedDB获取方法
    }
  }
}
</script>