Vue.js从URL缓存图像，避免重新获取

Question

我正在构建一个简单的图库+幻灯片应用程序。
在gallery组件中，我具有所有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，但这正是正在发生的情况。

是否有任何优雅的方法来避免这种情况并在加载一次后缓存图像？

Answer 1

您可以与服务工作者一起实现图像的缓存。

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

如果图像未更改，因为同一URL中的图像始终指向同一图像，则我建议您使用cacheFirst策略，因为如果图像已经存在，则无需向服务器发送请求在缓存中。

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