Vuejs从url缓存图片，避免重新获取答案

【问题标题】：Vuejs cache images from url, avoid re-fetchingVuejs从url缓存图片，避免重新获取
【发布时间】：2019-05-15 09:40:32
【问题描述】：

我正在构建一个简单的画廊 + 幻灯片应用程序。
在图库组件中，我拥有所有 url 并将它们显示在 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，但这正是正在发生的事情。

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

【问题讨论】：

【解决方案1】：

您可以使用 service worker 实现缓存图像。

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

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

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

【讨论】：