Pdf does not show images

[Sadia-QM-audio]

Hello, I am working on a quire project, but the generated pdf does not have any images. The only image displayed is the cover image. For other images, only the figure caption is displayed.

For more information, I am using quire v1.0.0-rc.10 on Windows. I was facing issues before with using "quire build" command, but I implemented the suggestion suggested here: (#626). The pdf images are still not displayed.

I have tried opening a new project and generating pdf without making any changes to the project, but the pdf did not have any images either.

[CLI:lib/pdf] generating PDF using Paged.js
[CLI:lib/pdf/pagedjs] printing C:\........\quire-three\_site\pdf.html

  Puppeteer old Headless deprecation warning:
    In the near feature `headless: true` will default to the new Headless mode
    for Chrome instead of the old Headless implementation. For more
    information, please see https://developer.chrome.com/articles/new-headless/.
    Consider opting in early by passing `headless: "new"` to `puppeteer.launch()`
    If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.

[CLI:lib/pdf/pagedjs] loaded
[CLI:lib/pdf/pagedjs] Rendering 24 pages took 1298.0999999996275 milliseconds.
[CLI:lib/pdf/pagedjs] post-processing

If someone knows how to solve this issue, I would appreciate your help.

[Erin-Cecele]

Hi @Sadia-QM-audio thank you for reaching out. The Puppeteer "warning" is just a notification and will not affect your PDF output. Two quick questions just to help me understand your working environment. Are you currently using the LTS version of Node.js? Also, are your images large in size? This will help us narrow down the problem.

[Sadia-QM-audio]

Hello, thanks for the response. I am using LTS v18.15.0. Some of the images are large, around 7 MB, but most of the images are less than 500 KB.

[Erin-Cecele]

Thanks, @Sadia-QM-audio. Try updating to the most recent LTS version: https://nodejs.org/en, and then output your project again.

If that doesn't work, I'd be curious to see if the images work with PrinceXML rather than Paged.js. PrinceXML is free to download (https://www.princexml.com/download/) for non-commercial use, though it does add a logo watermark to the first page of the PDF output. A desktop license can be purchased that will remove the watermark and also allow for commercial use. With PrinceXML installed, run quire pdf --lib prince to generate your PDF.

In the meantime, we'll keep looking into this issue, as it may be related to some prior issues we've been experiencing with Windows operating systems.

Thank you for your patience!

[Sadia-QM-audio]

Thanks for your reply! I updated to the latest LTS version, but the images are still not displayed. I have tried using PrinceXML, but I got similar results.

I was wondering if maybe quire build is causing any error. This is what I get when I run the command:

[CLI] running eleventy using lib/11ty cli
[CLI:11ty] running eleventy build
[quire] DEBUG    Figures:ImageProcessor
      inputRoot: C:\.....\quire-project\content\_assets\images
      outputRoot: C:\....\quire-project\public

[quire] INFO     Figures                        Processing complete
→ _site/index.html                     ./content/index.md                        28.5kB --
→ _site/a-intro/index.html             ./content/a-intro.md                      30.6kB --
→ _site/about/index.html               ./content/about.md                        30.6kB --
...
vite v4.4.9 building for production...
transforming...
✓ 45 modules transformed.
rendering chunks...
computing gzip size...
../_site/pdf-epub-title/index.html                          0.12 kB │ gzip:  0.12 kB
../_site/pdf-epub-half-title/index.html                     0.12 kB │ gzip:  0.12 kB
../_site/pdf-epub-copyright/index.html                      0.12 kB │ gzip:  0.12 kB
....
✓ built in 3.81s
[11ty] Benchmark    950ms   9%    17× (Configuration) "html" Transform
[11ty] Copied 118 files / Wrote 17 files in 10.00 seconds (588.2ms each, v2.0.1)

Does this mean that image files should be available in public folder too? For me the folder just has pdf.css, pdf.html and search-index.json files.

I have also noticed that if I run quire preview before running quire pdf, the pdf displays images in pages with the layouts cover and splash. But if I run quire build before quire pdf, these images are not displayed.

[Erin-Cecele]

Hi @Sadia-QM-audio, thank you for your patience. We suspect that the issue you are experiencing is in fact related to some ongoing challenges around quire build for Windows users (related to #626 which is currently blocked by an external dependency). We are looking into this further. In the meantime, I'm wondering if @rrolonNelson or @metro-glen are also experiencing this issue or if they discovered a workaround for their own Windows-based projects.

[khanzain4]

It appears that you're facing issues with image rendering in Quire PDF generation. To address this problem, follow these steps:

Check Image Paths:
Ensure that the paths to your images are correct in the project files. Verify that image references in your Quire project match the actual file locations. Correct any discrepancies.

Image File Formats:
Confirm that your images are in supported file formats (e.g., JPEG, PNG). Different PDF generators may have varying compatibility with image formats.

Update Quire:
Check if there are any updates or patches available for Quire. Upgrade to the latest version to benefit from potential bug fixes or improvements related to image rendering.

Puppeteer Configuration:
Address the Puppeteer deprecation warning by updating your configuration. Modify the puppeteer.launch() call to include headless: "new" as recommended. This may resolve compatibility issues with Puppeteer and improve image rendering.

javascript
Copy code

`puppeteer.launch({ headless: "new" });
`

Alternative PDF Generator:
Consider using an alternative PDF generator for Quire. Paged.js is the default renderer, but you can experiment with other options such as Prince or Vivliostyle. Adjust the configuration accordingly in your Quire project.

Project Structure:
Ensure that your project structure adheres to Quire's guidelines. Images should be placed in the correct directories, and references should be accurate in the project files.

Community Support:
Engage with the Quire community on forums or GitHub discussions. Share your issue, including the steps you've taken, and seek advice from other users or contributors who may have encountered similar problems.

Debugging:
Use debugging tools provided by Quire or Puppeteer to identify any specific errors or warnings related to image rendering. Inspect the console logs for potential clues.

By systematically addressing these aspects, you can troubleshoot and resolve the issue of missing images in your Quire-generated PDFs. If problems persist, consider reaching out to the Quire community for more tailored assistance or reporting the issue on their GitHub repository.
Below are the links to the finest learning platforms

1. W3 School
2. Iqra Technology
3. JavaPoint

[Erin-Cecele]

Thank you, @khanzain4, for this detailed answer and for your support of the community! We love to see it. Out of curiosity, are you working on a Quire project of your own or just particularly familiar with PDF generation and its inherent hurdles?

[khanzain4]

You're very welcome! I'm glad you found the response detailed and supportive. Currently, I'm not actively working on a Quire project, but I do have a good understanding of PDF generation and the challenges that come with it.