brenoprata10 / ng2-image-viewer

Ng2-Image Viewer for Angular 2+ projects
https://brenoprata10.github.io/ng2-image-viewer/
MIT License
31 stars 60 forks source link

Can't load PDF (base64) and images (url) #54

Open graphee-gabriel opened 4 years ago

graphee-gabriel commented 4 years ago

Hello @brenoprata10 , after struggling to get my pdfs properly to base64, I stumble upon another error.

Here's what i'm doing:

private _downloadToBase64(url): Promise<string | ArrayBuffer> {
    return fetch(url)
      .then(response => response.blob())
      .then(blob => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      }));
}

And then

for (const url of pdfUrls) {
  const base64 = await this._downloadToBase64(url);
  this.documents.push(base64.toString().replace('data:application/pdf;base64,', '')); 
}

for (const url of jpgUrls) {
  this.documents.push(url); 
}

so first you'll notice the only way i found to show a pdf was to remove from the base64 string the first part of it's value, being 'data:application/pdf;base64,'. After I finally got it to work as such, I can only visualize the pdf, but not the pictures that comes next. Instead when i click on next i'm getting:

breadcrumbs.js:58 ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at EmulatedEncapsulationDomRenderer2.removeChild (http://localhost:4200/vendor.js:90193:20)
    at DebugRenderer2.removeChild (http://localhost:4200/vendor.js:79091:23)
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.limparCacheElementos (http://localhost:4200/vendor.js:167303:27)
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.prepararTrocaImagem (http://localhost:4200/vendor.js:167290:14)
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.showImage (http://localhost:4200/vendor.js:167195:14)
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (http://localhost:4200/vendor.js:167328:14)
    at Object.eval [as handleEvent] (ng:///ImageViewerModule/ImageViewerComponent.ngfactory.js:369:35)
    at handleEvent (http://localhost:4200/vendor.js:77277:122)
    at callWithDebugContext (http://localhost:4200/vendor.js:78896:27)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:4200/vendor.js:78531:12)
    at dispatchEvent (http://localhost:4200/vendor.js:64364:25)
    at http://localhost:4200/vendor.js:76209:16
    at HTMLElement.<anonymous> (http://localhost:4200/vendor.js:90060:38)
    at HTMLElement.sentryWrapped (http://localhost:4200/vendor.js:126198:23)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:5758:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:73280:33)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:5757:60)
    at Zone.runTask (http://localhost:4200/polyfills.js:5535:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:5832:34)
    at invokeTask (http://localhost:4200/polyfills.js:6970:14)
    at HTMLElement.globalZoneAwareCallback (http://localhost:4200/polyfills.js:6996:1

If i only put images url, everything works perfect.

Any idea?