Add config to set image as blob

[superainovacoes]

Example of loading it as blob

document.write("<img id="imageblob"/>")
function response(e) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
document.querySelector("#imageblob").src = imageUrl;
}
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://demo.cloudimg.io/width/616/n/https://gallery.airstore.io/birds.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

[tjoskar]

Yes, I want to add the ability to add custom load- and set-functions (see #304).

But I guess you should be able to load a blob as it is:

@Component({
    selector: 'my-image',
    template: `
        <img
          [defaultImage]="defaultImage"
          [errorImage]="errorImage"
          [lazyLoad]="image"
          (onLoad)="onLoad($event)">
    `
})
export class MyImageComponent {
    errorImage = 'https://i.imgur.com/XkU4Ajf.png';
    defaultImage = 'https://www.placecage.com/1000/1000';
    image = this.defaultImage;
    loaded = false

    onLoad(success: boolean) {
      if (!success || loaded) {
        return
      }
      this.loaded = true
       fetch('https://demo.cloudimg.io/width/616/n/https://gallery.airstore.io/birds.jpg')
         .then(response => {
           if(response.ok) {
             return response.blob();
           }
           throw new Error('Network response was not ok.');
         }).then(myBlob => { 
           const objectURL = URL.createObjectURL(myBlob); 
           this.image = objectURL; 
         }).catch(error => {
           console.error(error);
           this.image = errorImage; 
         });
    }
}

This code will:

1. Load the default image and put it into the DOM
2. When the image is in viewport it will once again load the default image but since it is already loaded it will emit the onLoad-event
3. The onLoad function will be trigged and fetch the "real" image
4. When the new image is loaded, it will assign the url to image and angular will trigger a rerender
5. ng-lazyload-image will now try to load the "real" image but since it is alreday loaded, it will just replace the src attrebute.

However, this is not a good solution! This is just a hack untill #304 is resolved.