brenoprata10 / ng2-image-viewer Goto Github PK

Sudhanshu Yadav has updated his image viewer. It would be great, if you could update your imageviewer.js to the latest version 😃
https://github.com/s-yadav/iv-viewer/releases

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?

I am currently passing a PDF into the image viewer as a 64bit string. I have got it working but for some reason it only works if I put an image or random string in the images property in the HTML element:

<app-image-viewer [images]="['blank', pdf]"
[idContainer]="'idOnHTML'"
[loadOnInit]="true">
PDF Viewer</app-image-viewer>

I have pdf as a 64bit string that is passed in when the page loads and I can successfully see the pdf if I click the arrow to go to the next page, as the first item is 'blank' so it just shows the loader.

If I remove 'blank' from images and change it to:

<app-image-viewer [images]="[pdf]"
[idContainer]="'idOnHTML'"
[loadOnInit]="true">
PDF Viewer</app-image-viewer>

The page no longer loads and these errors are thrown in the console:

ERROR TypeError: Cannot read property 'match' of undefined
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.isURlImagem (ng2-image-viewer.umd.js:315)

ERROR TypeError: Cannot read property 'startsWith' of undefined
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.isPDF (ng2-image-viewer.umd.js:306)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.showImage (ng2-image-viewer.umd.js:232)

Is this a bug or am I going about doing this in the wrong way?

Thanks in advance :)

Hi,

I want to set the start page of the carousel in case of multiple images.
Can you please guide me on how to set this.
Is any input option present to set the start page of the carousel??

Thanks in advance.

I've upgraded your project to Angular 7 (because I had multiple issues with gulp, node-sass, etc. compilation of the original version ). Now I have an issue when clicking on Next button.

core.js:15723 ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.removeChild (http://localhost:4200/vendor.js:68858:20) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.removeChild (http://localhost:4200/vendor.js:60208:23) at http://localhost:4200/main.js:1002:32 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2781:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:53209:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2780:60) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2553:47) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (http://localhost:4200/polyfills.js:2856:34) at ZoneTask.invoke (http://localhost:4200/polyfills.js:2845:48) at timer (http://localhost:4200/polyfills.js:4639:29)

It happens on the line:
this.renderer.removeChild(container, iframeElement);

I've tried to play with the container and actually for a container like
const container = document.getElementsByClassName('iv-image-wrap').item(0);
instead of
const container = document.getElementById(this.idContainer);
it works and I don't get this error. But I get the same issue when I put an image-viewer to ng-bootstrap modal dialog.

My question is have you encountered this error? What in your opinion could be the cause of this exception?

Thank you

"@angular/animations": "~7.2.0",

ReportItemComponent.html:16 ERROR ReferenceError: ImageViewer is not defined
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.inicializarImageViewer (ng2-image-viewer.umd.js:214)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.imagesChange (ng2-image-viewer.umd.js:187)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.ngOnChanges (ng2-image-viewer.umd.js:98)
at checkAndUpdateDirectiveDynamic (core.js:22020)
at checkAndUpdateNodeDynamic (core.js:23281)
at checkAndUpdateNode (core.js:23230)
at debugCheckAndUpdateNode (core.js:23861)
at debugCheckDirectivesFn (core.js:23821)
at Object.eval [as updateDirectives] (ReportItemComponent.html:16)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813)
can you help me with it ?

Hi,
I am trying to send the image as base64 but the image is not getting loaded.

Below is the code for loading the image:

          <app-image-viewer *ngIf="imageBase64String" [idContainer]="'imagegallery'" [images]="[imageBase64String]" [fullscreen]="false"></app-image-viewer>

the string imageBase64String gets retrieved after the user clicks on view the image.

I did some debugging and found that the base64 string is indeed getting passed to the app-image-viewer component as it is avaialable in the download link (for download option)

However the imageContainer doesnt contain the image. Is there any extra methods that needs to be called?

I have integrated the image viewer, and now i have a gallery image and i want clicked on image and select on image viewer.
Have you a method for that?
Thx regards

This exception occurs for the following steps:

1. Load a PDF into the viewer. Viewer can show PDF successfully.
2. Click a button and load an image into the viewer. Viewer failed, and console shows the following exception:
   DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Another scenario where both PDF and image are loaded into the same viewer also has this exception.
<app-image-viewer [images]="[base64doc, base64image]"
[idContainer]="'idOnHTML'"
[loadOnInit]="true">

The image is stored as base64.

Hello, first of all thanks for this wonderful plugin which saved me days! I have one suggestion tho, how about a lite view like this, which activates on click and zooms into whole screen instead of the a container.

Anyways back to the bug,

I tried zooming in and out on a image in Mozilla Firefox, it crashed repeatedly and throws the same error on multple images, try zoomin in-out here,

Here's the Stack,

TypeError: el is undefined Stack trace: setStyle@http://localhost:4200/vendor.js:154870:13 setStyle@http://localhost:4200/vendor.js:152455:9 setStyle@http://localhost:4200/vendor.js:109212:9 ./node_modules/ng2-image-viewer/ng2-image-viewer.umd.js/</ImageViewerComponent.prototype.atualizarCorHoverIn@http://localhost:4200/vendor.js:172749:9 View_ImageViewerComponent_16/<@ng:///ImageViewerModule/ImageViewerComponent.ngfactory.js:279:19 handleEvent@http://localhost:4200/vendor.js:107309:82 callWithDebugContext@http://localhost:4200/vendor.js:108928:24 debugHandleEvent@http://localhost:4200/vendor.js:108563:12 dispatchEvent@http://localhost:4200/vendor.js:94396:16 renderEventHandlerClosure/<@http://localhost:4200/vendor.js:106241:16 decoratePreventDefault/<@http://localhost:4200/vendor.js:154632:38 invokeTask@http://localhost:4200/polyfills.js:3626:17 onInvokeTask@http://localhost:4200/vendor.js:103312:24 invokeTask@http://localhost:4200/polyfills.js:3625:41 runTask@http://localhost:4200/polyfills.js:3403:28 invokeTask@http://localhost:4200/polyfills.js:3700:24 invokeTask@http://localhost:4200/polyfills.js:4838:9 globalZoneAwareCallback@http://localhost:4200/polyfills.js:4864:17

"setStyle@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:443044\nsetStyle@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:635236\nCcuA/</r</t.prototype.atualizarCorHoverIn@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:264836\nEy/<@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:1049810\nhandleEvent@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:232971\nhandleEvent@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:244378\nYp@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:148271\nwb/<@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:226309\nXt/<@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:441226\ninvokeTask@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:7001\nonInvokeTask@https://mgoart.web.app/main-es2015.1b0fb64bcb9a8301e53b.js:1:205749\ninvokeTask@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:6914\nrunTask@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:2499\ninvokeTask@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:8006\ny@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:20114\nk@https://mgoart.web.app/polyfills-es2015.0ef207fb7b4761464817.js:1:20358\n"

The image viewer css gets broken onload and image is pushed out of the container.
Notice the scrollbar

In my case, I want to reload the ImageViewer on click event. On click event I am changing the image src but In view part it does not show new image after click. I have checked jQuery Imageviewer documentation - http://ignitersworld.com/lab/imageViewer.html , here is the refresh method available. https://i.imgur.com/s39sz7X.jpg

there are no this image

Hello,

I want to know when I can add images files (with url) ?

Thanks

When trying to view other image file types other than .png it shows fine but once the download is clicked for those other than png, the image cannot be opened since the download made it jpg.

When it shows de component the buttons are active but cant see the icon image.

How do i change the height of the image viewer? I tried to set the height in every imaginable element, but none of it works.
How can I set my height to 200px? (So that the image will scaled automatically?)

Thank you!

Hi,

I use ng2-image-viewer in modal :
<mat-dialog-content >
<div class="row" *ngIf="media !== null">
<div class="col-md-12">
<h2>
{{media.idaialertmedia}}
</h2>
<app-image-viewer [images]="[fileUrl]"
[idContainer]="'idOnHTML'"
[fullscreen]="false"
[loadOnInit]="true"
[showPDFOnlyOption]="false">
</app-image-viewer>
</div>
</div>
...

The image is displayed but without download option....which is the most important for me...

[download]="true" doesn't change anything

Thank you in advance

Hi,
I want to load the 100 image with their filename as caption on each image.how could I do??can u help me this?

I'm getting an error at line 72 in imageviewer.js, img is undefined.

Watching the network traffic, a request is never made to the image.

I'm using Angular 6, jQuery 3.3.1 and have verified the image URL is correct.

Hi,
As in demo here
https://brenoprata10.github.io/ng2-image-viewer/

Horizontal scroll bar didn't displayed when maximizing pdf document.
Resizing the iframe could fix this issue.
Thanks

Is there a limit on the size o base64 image that can be loaded.
On converting an image(4.96MB) to base64(12MB) and sending it to the component, there is a 'net::ERR_INVALID_URL' error

Hi,

Upon upgrading to Angular 9 we receive the following errors:
Package "ng2-image-viewer" has an incompatible peer dependency to "@angular/core" (requires "^7.0.0" (extended), would install "9.0.0").
Package "ng2-image-viewer" has an incompatible peer dependency to "zone.js" (requires "^0.8.4", would install "0.10.2").
Package "ng2-image-viewer" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.5.4").

Do you plan to add support for Angular 9?

I have an array of paths of images, i cannot find any documentation, regarding this functionality.

hi, we currently use ng2-image-viewer on our project and finding some strange error, currently if we passing array of base64 string to <app-image-viewer> sometime it trigger error on specific file. after longtime debugging i notice that there is regex new RegExp(/(https|http|www\.)/g) to classify is the string url or base64 this function isURlImagem.

this function trigger error when we passing base64 string file that contain http (in this case 'hTtP'), the image-viewer will render the file via http get protocol instead of rendering from base64 string that we pass, and trigger error entity too large because the image-viewer using base64 as query param while using http get protocol.

Hi Breno,
The plugin works fine for the ios devices. However when tested on android phones (Nexus 5X / API 28), the PDF view is not working. To cross check, your demo url is opened in the android's default browser(not chrome) and found that the PDF is not getting rendered.

When analysed more, it was found that the iframe containing blob protocol for the src attribute have some issues on cordova android. Though the allow-intent and allow-navigation tags are set to href="*", it is still not working.

Any thoughts.

Getting following error when i try to load pdf and click on pdf icon top-left button.

ImageViewerComponent.html:1 ERROR RangeError: Maximum call stack size exceeded
at String.startsWith ()
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.isPDF (ng2-image-viewer.umd.js:306)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:359)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.proximaImagem (ng2-image-viewer.umd.js:360)

I am using your library to display both image and pdf inside my webpage. I was able to display the images and pdfs when the component is using outside of my html content. But my pdf and image files are loading from a service and those files should be displayed after that.

So I have placed your component inside *ngIf condition and after that library is not working. This is the sample code.
<div *ngIf="this.remoteFileLoaded() == true"> <app-image-viewer [idContainer]="'appImageViewer'" [images]="['https://images.nga.gov/en/web_images/niagara2.jpg']" [loadOnInit]="true"></app-image-viewer> </div>

I tried with both 'true' and 'false' for [loadOnInit] and still did not find any success. So I did some debugging and found that this code block of ng2-image-viewer.umd.js causes the issue.
this.wrapper = document.getElementById("" + this.idContainer); if (this.wrapper) { this.curSpan = this.wrapper.querySelector('#current'); this.viewer = new ImageViewer__default(this.wrapper.querySelector('.image-container')); this.wrapper.querySelector('.total').innerHTML = this.totalImagens; }
When this code is run, viewer element is not available and that is why the component is not loading.
this.wrapper = document.getElementById("" + this.idContainer);
wrapper is null and that breaks the flow. Do you have any clue on this.

Thank you.

With #20 there seems to be an issue with the reinstantiation of ImageViewer.

The update of the [images]-parameter lead to the following error:

ImageViewComponent.html:2 ERROR Error: An image viewer is already being initiated on the element.
    at ImageViewer._findContainerAndImageSrc (ImageViewer.js:239)
    at new ImageViewer (ImageViewer.js:190)
    at ImageViewerComponent.inicializarImageViewer (ng2-image-viewer.umd.js:215)
    at ImageViewerComponent.imagesChange (ng2-image-viewer.umd.js:186)
    at ImageViewerComponent.ngOnChanges (ng2-image-viewer.umd.js:97)

Hi, upon upgrading a project to Angular 8, I get 3 warnings:

npm WARN [email protected] requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of rxjs@^5.1.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of zone.js@^0.8.4 but none is installed. You must install peer dependencies yourself.

is Angular 8+ support planned?

For a project I'm working on, I found your good looking viewer, the only thing is I would also like to add some text to the image that is showing.

Is this already possible in the current version?

Text as overlay, or under the picture or in the number-field (1/3) under the picture?

Hello,
I'm having and issue when trying to implement this image viewer.
Css classes loads, but it seems that .js or even jquery is making me get errors.

ERROR ReferenceError: "$ is not defined"

<div class="container">
    <app-image-viewer
      [images]="['https://picsum.photos/900/500/?image=1016', 'https://picsum.photos/900/500/?image=668']"
      [idContainer]="'idOnHTML'"
      [loadOnInit]="'demo'">
</app-image-viewer>
</div>

This seemed like it would have been the 'king' library to use! Sadly, generates the following in Angular 7:

"this.viewer" is undefined

With this console error:

This is what gets rendered:

i want to create 1 button to call event zoom-in how can i call it

Hi

In description it mentioned that, add "imageviewer.js", but it is not adding while install using npm. I copied the code and created it manually.

After that i am getting below error.
Cannot read property 'load' of undefined
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.showImage

Seems like the viewer is not initializing.

We're using ng2-image-viewer in a Cordova Project and loading Images as Base64 from the device storage and using push to place the Base64 strings into an array. This works fine for nearly all images but for some obscure reason we have certain images that will not display and instead the "spinner" remains on the screen with no error reported in the Console or anything. If this was random then I would suspect coding issues but this happens only with certain images and only those images. I have attached two example BASE64 strings in the zip
Temp.zip
. An example of one that works and one of the ones that does not. I am a bit unsure how to go about finding out what is wrong.

I have just installed the ng2 image viewer it loads fine however the icons are not visible upon initialization . The text is visible and actions are working.

Images are not getting loaded for few base64 string I tried. However it is working when I tried with other plugins.

Getting below error.
net::ERR_INVALID_URL

In the case when we have a lot of heavy files, is it possible to lazy load images/pdfs and at the same time have a number of total files displayed a the bottom of the viewer?

We want to use ng2-image-viewer on our project and test it.
During the tests, we saw that after loading a PDF, no other files can be navigated.
the console error is:

ImageViewerComponent.html:1 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:79433:20)
at DebugRenderer2.removeChild (http://localhost:4200/vendor.js:76436:23)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.limparCacheElementos (http://localhost:4200/vendor.js:93222:27)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.prepararTrocaImagem (http://localhost:4200/vendor.js:93209:14)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.showImage (http://localhost:4200/vendor.js:93114:14)
at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.imagemAnterior (http://localhost:4200/vendor.js:93266:14)
at Object.eval [as handleEvent] (ng:///ImageViewerModule/ImageViewerComponent.ngfactory.js:357:27)
at handleEvent (http://localhost:4200/vendor.js:74622:122)
at callWithDebugContext (http://localhost:4200/vendor.js:76241:27)
at Object.debugHandleEvent [as handleEvent] (http://localhost:4200/vendor.js:75876:12)

TNX

Olá Breno, tudo bem?

Estou tentando utilizar a biblioteca, mas estou tendo problema para carregar PDF, e quando clico no botão para mostrar apenas 'PDF', ele da erro 'Maximum call stack size exceeded'. Estou utilzando a versão '7.2.0' do Angular. Será que é algum problema de versão? Pois ele diz que preciso utilzar a versão '5.1.0' do 'rxjs', mas estou utilizando a versão '6.3.3' dele, que é compativel com a versão 7.2.0 do angular. Não consigo mudar de versão, a menos que eu mudasse para a versão 5 do angular.

Consegue me ajudar com este problema?

In bootstrap there is a class 'tooltip'. This causes the buttons not to be displayed when bootstrap is used. Would it be possible to use a different name for the CSS class?

Sometimes, the images not load, and pdf never works. And, when I set the property 'show only pdf', happen this error: 'Maximum call stack size exceeded'
Follow the example used:

Image -> https://www.ibe.edu.br/wp-content/uploads/2018/03/certificado-americana-1.jpg

PDF -> http://www.orimi.com/pdf-test.pdf

Obs: I'm using the version 3.0.4

<app-image-viewer *ngIf="showImageViewer"
[images]="[image]"
[idContainer]="'idOnHTML'"
[loadOnInit]="true">

Display pdf files of public link or in local attachment folder

Hello, i got the issue when init the component at the first time. Firstly, the image wasn't loaded and secondly, if it was loaded, it would be not aligned.
Link:

Hello dear friend.

I'm using the EDGE browser, version 44, but the PDF not load. In the others browsers (Chrome, Firefox and Opera) works normally.
The pdf file is a base64.
In the component, load the page instead of pdf file.
There isn't error on the console browser.

Pdf test: http://www.orimi.com/pdf-test.pdf

Can you help me?

I there a way for me to change the selected image via index?