Cómo mostrar imágenes sin conexión con Angular 2

Solo tiene que hacer un servicio de almacenamiento local.

imgData = getBase64Image (bannerImage); / * la imagen del banner será tu imagen. colóquelo en un bucle o matriz si las imágenes son más de una y tome imgData como matriz. (supongo que sabes el truco) * /
localStorage.setItem (“imgData”, imgData);
//representación :
función getBase64Image (img) {
var lienzo = document.createElement (“lienzo”);
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext (“2d”);
ctx.drawImage (img, 0, 0);

var dataURL = canvas.toDataURL (“image / png”);

return dataURL.replace (/ ^ data: image \ / (png | jpg); base64, /, “”);
}

Luego, en su próxima página, crea una imagen con un src en blanco como este:

Y directamente cuando se carga la página, utiliza estas tres líneas siguientes para obtener la cadena base64 de localstorage y aplicarla a la imagen con el src en blanco que creó:

var dataImage = localStorage.getItem (‘imgData’);
bannerImg = document.getElementById (‘tableBanner’);
bannerImg.src = “data: image / png; base64,” + dataImage;

Lo probé en bastantes navegadores y versiones diferentes y parece funcionar bastante bien.