Use lightbox with blob object url

[rpereira3]

I try to use angular2-lightbox with object url like this :

{ src: URL.createObjectURL(image.blob), caption: null, thumb: null }
Variable image.blob is a Blob.

But i have the error in the console :
unsafe:blob:http://localhost:4200/280f04e8-a864-40f1-ba97-fb8f2379ca07:1 GET net::ERR_UNKNOWN_URL_SCHEME

I try :
{src: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(image.blob)), caption: null, thumb: null}
or
{src: this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(image.blob)), caption: null, thumb: null}

Now i have the error :
SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:4200/1861e3df-564f-4e18-864b-cb1e27efb2ef%20(see%20http://g.co/ng/security#xss):1 GET http://localhost:4200/SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:4200/1861e3df-564f-4e18-864b-cb1e27efb2ef%20(see%20http://g.co/ng/security 404 (Not Found)

In my view, the image works :

`

<div class="lb-outerContainer transition" style="transition-duration: 0.5s;">
  <div class="lb-container">
    <img class="lb-image animation fadeIn" src="blob:http://localhost:4200/1861e3df-564f-4e18-864b-cb1e27efb2ef" hidden="" style="animation-duration: 0.7s;">
    <div class="lb-nav" hidden="">
      <a class="lb-prev" hidden=""></a>
      <a class="lb-next" hidden=""></a>
    </div>
    <div class="lb-loader">
      <a class="lb-cancel"></a>
    </div>
  </div>
</div>
<div class="lb-dataContainer" hidden="" style="animation-duration: 0.7s;">
  <div class="lb-data">
    <div class="lb-details">
      <span class="lb-caption animation fadeIn" hidden="" style="animation-duration: 0.7s;"></span>
      <span class="lb-number animation fadeIn" hidden="" style="animation-duration: 0.7s;"></span>
    </div>
    <div class="lb-closeContainer">
      <a class="lb-close"></a>
    </div>
  </div>
</div></div>`

But in my navigator, i have just the backdrop with a blank lightbox.

It's a bug or it's impossible to use the module with blob object url ?

[themyth92]

Sorry, this module does not work with Blob type currently.

[lucaritossa]

@rpereira3 you should get the dataURL from your blob object.
This is an example where you provide the "blob" and the image.src will be populated with the "dataURL" version:

private _createImageSrcFromBlob(image, blob: Blob) {
    const reader = new FileReader();

    reader.addEventListener('load', () => {
      image['src'] = this._sanitizer.bypassSecurityTrustUrl(reader.result);
      this._changeDetector.detectChanges();
    }, false);

    if (blob) {
      reader.readAsDataURL(blob);
    }
  }

and then use it as suggested at the end of the issue #11 (take a look to this demo-example branch)

[themyth92]

Should be fixed now !

[rpereira3]

{ src: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(image.blob)), caption: null, thumb: null }

That works now, thx !