Vuejs 缓存来自 url 的图像，避免重新获取

Question

我正在构建一个简单的画廊+幻灯片应用程序。
在画廊组件中，我拥有所有网址并将它们显示在GalleryItem组件中。

<gallery-item v-for="i in images" :item="i" :key="i.uid"/>

GalleryItem然后使用

<img :src="item.url"/>

显示图像。
如果用户单击任何一个，GalleryItem它将在灯箱/幻灯片组件中突出显示。

<lightbox :item="highlightedItem"/>

再次使用

<img :src="item.url"/>

我天真地期望浏览器缓存该请求，而不是重新加载完全相同的 URL，但这正是发生的情况。

有没有什么优雅的方法可以避免这种情况并在加载一次时缓存图像？

Answer 1

您可以使用 Service Worker 来实现缓存图像。

您可以使用的示例服务工作线程库是Workbox。使用 Workbox，您可以定义要缓存的 URL 和多种不同的缓存策略。与以下代码示例类似，只需将 RegExp 替换为适合您的用例的正则表达式，例如使用图像扩展名。

如果你的图像没有改变，因为同一个网址总是指向同一个图像，我建议你使用cacheFirst策略，因为如果图像已经在缓存中，你就不需要向服务器发送请求。

workbox.routing.registerRoute(
  new RegExp('/styles/'),
  new workbox.strategies.CacheFirst()
);