Images are not displayed in thumbnails

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
|UI version|‘8.7.0’|
|Core version|‘8.7.0’|
|webviewer.min.js|‘8.7.0’|

Detailed description of issue
In the thumbnail option, it doesn’t show me the images of each page

Expected behaviour
It should display an image of each page of the PDF

Does your issue happen with every document, or just one?
All documents

Link to document
it’s on localhost

Code snippet

Hi there,

Thanks for reaching out to pdf.js express forums,

I am unable to reproduce the issue you mentioned in localhost:

Are there any console messages regarding this issue?
Could you please try clearing your cache and hard refresh?

Best regards,
Kevin Kim

Hi kkim,

these are console errors, i don’t think they are the problem?

I did this to clear the cache and do a hard refresh

Hi there,

It looks like there could be potential problems because of the console errors.
Could you please provide any custom code for WebViewer? Or a minimal runnable sample project to reproduce the issue.

Best regards,
Kevin Kim

Hi kkim,

This is my code for WebViewer, and now is live, this is url with token:https://nunb.mpanel.app/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3N1ZUlkIjo2OTY3LCJleHAiOjE2Nzg0NTc5ODQsImluc3RhbmNlIjoiYW16In0.GEwA46hweOcKr5ELUlHYGWgle5we-FA62lt1vJ31f2s.

<template>
  <div ref="viewer"></div>
</template>

<script>
/* eslint-disable */
import WebViewer from "@pdftron/pdfjs-express-viewer";

export default {
  name: "WebViewer",
  props: {
    path: String,
    pdfUrl: String,
    pdfLan: String,
    urlIssues: String,
  },
  mounted: function () {
    WebViewer(
      {
        path: this.path,
        initialDoc: this.urlIssues,
        licenseKey: "kL3Hn4gvrCtCWg2ZI3yH",
      },
      this.$refs.viewer
    ).then((instance) => {
      // instance.UI.disableElements(["ViewControls", "viewControlsButton"]);
      instance.UI.disableElements(["selectTool", "selectToolButton"]);
      instance.UI.disableElements(["marqueeTool", "marqueeToolButton"]);
      instance.UI.disableElements(["language", "languageButton"]);
      instance.UI.disableElements(["download", "downloadButton"]);
      instance.UI.disableElements(["print", "printButton"]);
      instance.UI.disableElements(["fullscreenButton"]);
      instance.UI.disableElements(["menuButton"]);
      instance.UI.disableElements(["viewControlsButton"]);

      // pan tool
      const { Tools } = instance.Core;
      const panTool = Tools.ToolNames.PAN;
      instance.UI.setToolMode(panTool);

      instance.UI.iframeWindow.addEventListener("loaderror", (err) => {
        // Do something with error. eg. instance.showErrorMessage('An error has occurred')
      });

      // disable right clicks
      instance.UI.contextMenuPopup.update([
        {
          type: "none",
          label: "",
          onClick: () => console.log("clicked"),
        },
      ]);

      // set language mode
      instance.UI.setLanguage(this.pdfLan);

      // set layout mode
      instance.setLayoutMode(instance.LayoutMode.Single);
      if (window.innerWidth > 450) {
        instance.setLayoutMode(instance.LayoutMode.FacingCover);
      }
    
      

      // now you can access APIs through the WebViewer instance
      const { Core, UI } = instance;

      // adding an event listener for when a document is loaded
      Core.documentViewer.addEventListener("documentLoaded", () => {
        console.log("document loaded");
      });

      // adding an event listener for when the page number has changed
      Core.documentViewer.addEventListener(
        "pageNumberUpdated",
        (pageNumber) => {
          console.log(`Page number is: ${pageNumber}`);
        }
      );

      // add fullscreen icon
      instance.UI.setHeaderItems((header) => {
        header.getHeader("default").push({
          img: "icon-header-full-screen",
          index: -1,
          type: "actionButton",
          element: "fullScreenButton",
          onClick: () => {
            instance.UI.toggleFullScreen();
          },
        });
      });

      // add dark mode icon
      let isDarkMode = false;

      function toggleDarkMode() {
        isDarkMode = !isDarkMode;
        if (isDarkMode) {
          // Postaviti tamni režim
          instance.UI.setTheme("dark");
        } else {
          // Postaviti svetli režim
          instance.UI.setTheme("light");
        }
      }

      // Dodavanje dugmeta u zaglavlje za uključivanje/isključivanje dark mode
      instance.UI.setHeaderItems((header) => {
        header.getHeader("default").push({
          img: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
</svg>`,
          index: -1,
          type: "actionButton",
          element: "darkModeButton",
          onClick: toggleDarkMode,
        });
      });

      // add logo
      UI.setHeaderItems((header) => {
        header.unshift({
          type: "customElement",
          render: () => {
            const logo = document.createElement("img");
            logo.src =
              "  https://www.politika.rs/themed/politika/img/branding/politika-logo-nopadding.svg";
            logo.style.width = "100px";
            logo.style.marginLeft = "10px";
            logo.style.marginRight = "30px";
            logo.style.cursor = "pointer";
            logo.onclick = () => {
              window.open("https://amz.mpanel.app/", "_blank");
            };
            return logo;
          },
        });
      });
    });
  },
};
</script>

Hi there,

It looks like you are using some of the older namespace code for some part of your code.

for example, you use instance.setLayoutMode instead of instance.UI.setLayoutMode
Older API:
https://pdfjs.express/api/7.0/WebViewerInstance.html#setLayoutMode
Newer APi:
https://pdfjs.express/api/UI.html#.setLayoutMode

You also want to call setToolMode after the ‘documentLoaded’ event.

I notice that you get the console error whenever you scroll the page:


which points to the pageWidgetContainer not being defined:

Could you please try disabling virtualDisplayMode and see if that resolves your issue?
https://pdfjs.express/api/Core.DisplayModeManager.html#disableVirtualDisplayMode

Best regards,
Kevin Kim

Hi kkim,

I am not able to solve the problem with #pageWidgetContainer via disabling virtualDisplayMode, do you know of another solution?

Hi there,

It looks like you found a solution?

Best regards,
Kevin Kim

Hi kkim,

Yes, I have managed to do it
The packages needed to be updated, I just typed npm update and that fixed the problem.

Thank you,
Djordje