Cache images into local storage for offline use.
Remote images must be served from a server responding with the correct CORS headers.
For example with apache the following config can be added to a .htaccess file:
<Files *>
Header add Access-Control-Allow-Origin "*"
</Files>
Via bower:
bower install localstorage-image-cache
This module is used in two parts, correct HTML image tag usage and a JS function to perform the image loading and caching.
To setup an image for caching.
Original image tag:
<img src="http://server.com/image.jpg">
Cacheable image tag:
<img src="somelocalloadingimage.jpg" data-src="http://server.com/image.jpg">
To load all images setup for caching on a page:
var lsic = require('localstorage-image-cache');
lsic.loadImages();
See the example app in the example directory.
npm start
Will open example/index.html in your browser, hit reload and you'll notice the 2 example images are not loaded from the remote site.