Loads twice with [imageLazyLoadConfig], no custom headers sent the second time

[kalmargabor]

It loads the image twice, when imageLazyLoadConfig is used with the headers property. First time, the request contains the configured request headers, second time it doesn't.

template:

<div imageLazyLoadArea [imageLazyLoadConfig]="lazyLoadConfig">
    <img [imageLazyLoadItem]="backgroundUrl"/>
</div>

component:

import { Component, OnInit } from '@angular/core';
import { IImageLazyLoadConfig } from 'ng2-image-lazy-load';

@Component({
    selector: 'lazy-loader-demo',
    templateUrl: './lazy-loader-demo.component.html'
})
export class LazyLoaderDemoComponent implements OnInit {
    backgroundUrl = 'http://localhost/xy/api/file/get';

    public lazyLoadConfig:IImageLazyLoadConfig = {
        headers: {
            'Authorization': 'Bearer a-valid-access-token'
        },
        loadingClass: 'custom-loading',
        loadedClass: 'custom-loaded',
        errorClass: 'custom-error'
    };

    ngOnInit() {
    }
}

Second call is 401, because the Authorization header is not set. Angular version is 2.4.2, webpack 2.1.0-beta.25 .

Any advice is appreciated.

[kalmargabor]

The browser doesn't use the response from the first xhr, when the custom headers are sent, The images sent by the server framework are protected images so they shouldn't be cached anyway.. and preloading depends on cache.

A solution I came up with is to save the original image response (the one sent with the valid headers) as a base64 string, and use it as a src for the img. See my fork for the base64 version (the server is supposed to send back a data:image/png;base64,.. string).