Vuejs cache images from url, avoid re-fetching Vuejs cache images from url, avoid re-fetching vue.js vue.js

Vuejs cache images from url, avoid re-fetching


You can implement caching images with a service worker.

An example service worker library that you can use is Workbox.With Workbox you can define a URL you want to cache and multiple different caching strategies. Similar to the following code example just replace the RegExp with one that fits your use case, for example using the image extensions.

If your images don't change as in the same url always points to the same image, I would recommend you to use the cacheFirst strategy, as then you will not need to send a request to the server if the image is already in the cache.

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