Image not found in PDF created from HTML to PDF conversion

I am currently utilizing the HTML-pdf library to convert an HTML page into a PDF format. While the dynamic content is being displayed in the generated PDF, there seems to be an issue with the image not appearing as expected. Despite trying various methods, I have been unsuccessful in rendering the image in the final PDF file. Can someone assist me with troubleshooting this problem? Below is the snippet of my HTML template:

<head>
    <title>Certificate</title>
    <!-- <link rel="stylesheet" href="../stuff/certificate.css"> -->
    <style>
        html,
body {
      height: 100%;
      width: 100%;
      }


img{
    height: 100%;
    width: 100%;
    margin:0px;
    }

    #name{
    margin-top:-420px;
    margin-left: 60px;
    }

  p{
    font-size:40px;
    color:black;
    font-weight:400;
    text-align: center;
  }
</style>
</head>
<body>
    <img src="../stuff/certificate.jpg">
    <div id="name"><p><%=name%></p></div>
</body>
</html>

While I am successfully able to display the name on the PDF, the image remains missing. Any suggestions or guidance would be greatly appreciated. The image is located in a different folder compared to the HTML file.

Answer №1

Consider utilizing a JavaScript library that can identify when images have finished loading.

You could implement it in the following manner:

<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f46424e484a5c43404e4b4a4b6f1b011e">[email protected]</a>/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
  imagesLoaded(document.body, function() {
    window.print();
  });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered with puppeteer: unexpected token "new Promise", causing inability to nest try/catch blocks

Trying to optimize my code by nesting try/catch blocks for smoother execution. Below is the original block of code that was working fine: try { await page.waitFor("#login-form-os-captcha", { timeout: 1500 }); security = true c ...

What is the Mongoose counterpart to the ObjectId in MongoDB?

Just to clarify, our system is currently functioning using mongoose exclusively. However, I did have to import {ObjectId} from mongodb in order for it to recognize the ID of the Candidate. Here's a brief overview: we create Candidates (in the Candida ...

Working with variables passed from Node.js in Jade processing

Currently, I have a situation where my script is sending a matrix that looks like this: [[1,2,3,4], [7,6,5,4], [2,3,4,5]]. After sending it using res.send(JSON.stringify(dataArray)); and viewing it in jade with h1#results, I can see that the format appears ...

"Step-by-step guide on uploading multiple images to a Node server and storing them in

Hey everyone! I'm currently working on a project using React and MongoDB. Users are required to register and login before accessing the app. Once logged in, they can input their name, number, and images through a form. However, I've encountered a ...

Experiencing trouble with implementing multiple textboxes based on option selection using javascript

My JavaScript code is supposed to display multiple textboxes based on the user's selection, but for some reason, I can only select one textbox at a time. I'm not sure what's wrong with my code. Here's the snippet of the code: <ht ...

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

NG6002 error: This error is showing up in the imports of AppModule, even though it has its own set of issues

Running Angular 12 locally is smooth with no errors in the project build. Local Configuration: Angular CLI: 12.0.5 Node: 12.16.3 Package Manager: npm 6.14.4 OS: win32 x64 Angular: 12.0.5 However, when attempting to build the project on a Linux se ...

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

Why is it that @font-face fails to function properly even after being defined correctly?

Here's the @font-face code I've been using: @font-face { font-family: "NotesEsa-Bold"; src: url("C:\Users\test\Desktop\Webpage\Fonts\NotesEsaBol.ttf") format("truetype"); /* Safari, Android, iOS */ font-we ...

Is it possible to generate an image using data from a JSON file?

Possible Duplicate: Converting array to PNG in PHP Pixel Data in JSON Format { "274:130":"000", "274:129":"000", "274:128":"000", "274:127":"000", "274:126":"000", "274:125":"000", } What is the most efficient method for converting a JSO ...

Is it possible to use nodemailer locally with NodeJS? The issue is that the greeting emails are not being received

Every time I attempt to send an email using nodemailer within my local network, I encounter the following error: *Greeting never received at SMTPConnection._formatError (C:\Users\PI_TEAM\Desktop\node_modules\nodemailer\lib ...

In the Opera browser, the closing script tags seem to mysteriously vanish

I recently built a website using bootstrap and implemented the JQuery load function to merge separate HTML files into one for better organization. The site is currently live on github pages. However, I've encountered an issue specifically with Opera ...

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

Import data from JSON using JavaScript

I have a collection of txt files that contain custom content. The file names are stored in a JSON array. { txtFiles: ['./file1.txt', './file2.txt', './file3.txt'] } I am looking to use the require function in JavaScript t ...

Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...

Removing an appended value in jQuery: A step-by-step guide

Here is my code that successfully appends the first item: After clicking the "show count" button, a pop-up dialog box will display the count. However, to remove the appended item or refresh the page, additional steps are required. function showcount() { ...

Discover every user receiving a database object instead of individual records with mLab

While using my express application with the mLab database, I encountered an issue. When trying to find only one record, everything works fine. However, when attempting to retrieve a list of users from the database, I receive the following response. Query ...

What is the best way to coordinate two separate asynchronous calls in a Node.js application

My journey in programming has led me to delve into Python and Javascript, particularly the asynchronous nature of JS paired with a reactive framework that I have grown to appreciate. Recently, I decided to explore NodeJS as a replacement for a Python scrip ...

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

How does npm determine which packages are considered direct dependencies when using the 'npm list' command

Upon entering the following three commands, a new directory is created: npm install underscore npm install lodash npm install express The result is a node_modules folder containing numerous packages: $ ls node_modules accepts cookie-signat ...