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

Generating a transparent PNG image containing text using PHP from the ground up

I have been searching for examples on the web, but all of them involve creating PNGs with text from an existing image. Is it possible to start with a transparent PNG and then add text to it? Here is the code I have tried so far (unfortunately, it does not ...

What is the best way to incorporate modal window parameters into this code snippet?

JavaScript function: function loadBlockEditor(block, username) { var blockInfo = $.ajax({ url: "in/GameElement/BlockEditor.php", type: "GET", data: 'block=' + block + '&nick=' + username, dataType: "html" }); b ...

What is the best way to input individual students' CA and exam scores into distinct fields and then calculate their total scores in a separate text field?

As a beginner in jQuery, I am looking for guidance on creating a script that calculates the Total score, Grade, Remark, and Position based on the user input of CAT score and EXAM score. The result should be displayed dynamically once both scores are entere ...

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

I have exhausted all possible solutions to fix the issue with res.cookie, but unfortunately, it still does

I'm having trouble viewing cookies in my browser that are set by using res.cookie. Below is the code I am using, but for some reason the cookies are not being set. Can someone help me figure out how to properly set them? const token = generateToken(u ...

Is a fresh connection established by the MongoDB Node driver for each query?

Review the following code: const mongodb = require('mongodb'); const express = require('express'); const app = express(); let db; const options = {}; mongodb.MongoClient.connect('mongodb://localhost:27017/test', options, fu ...

Mastering Excel Automation

Hello, I am looking to download an Excel sheet that contains a macro. However, I am using a PHP script to handle the download process. Is it feasible to download an Excel sheet with a macro in PHP? ...

When hovering over the menu, the sub-menu is displayed and the content slides downwards. Is there a way to prevent the content from sliding down and have the sub-menu overlap the

When the main menu is hovered over, a sub-menu appears and the content below the main menu slides down. Check out the code snippet below: HTML: <div id="holderDiv"> <div id="menu"> <a href="#" id="items">Menu 1</a> < ...

What is the best way to create a backup copy of my project using git?

To ensure the safety of my project, I took the necessary steps to back it up. First, I initialized a repository using git init Following that, I committed all files by executing git add . git commit -am "first commit" Now, the next step involves pushin ...

Uploading files using HTML 5, Ajax, and jQuery

I am attempting to utilize jQuery to upload a file by using the ajax POST method and sending the uploaded file to url:"/files/uploads" with the parameter file. To achieve this, I have set up the following input elements: <form id="fileUploadForm"> ...

Express-fileupload making it possible to upload files

I am having some trouble using express-fileupload to upload a file. Despite my efforts, I have not been successful in making it work properly. Although I can technically 'upload' the file (which is an image in this case) and see it displayed with ...

What is the method for instructing webpack to exclude both core and npm-installed node modules from processing?

When using webpack to pack and transpile a module I've written with babel, it's important that nothing from node_modules is included. Additionally, Node.js core modules should not be packed either. I am encountering errors related to core module ...

Struggling to align divs in HTML using CSS

Struggling with aligning my divs in the center of the parent div and keeping them inline. I have a parent "page" containing 6 other divs - "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06". They sit inline when the window is small, but when it's re ...

Modifying the content of a webpage with the help of Tampermonkey

I'm working on changing a W Text into B using the code below. It's functional, but I'm experiencing two issues. First, there is a lag when refreshing the page where it briefly shows the W text before replacing it with a B. Second, every 20 o ...

Deactivate zoom on the viewport and display the entire page

Hello, I am currently working on my website www.ecogo.io and I am trying to get the entire page to display instead of just a portion. However, I am encountering an issue where the page loads zoomed in on mobile browsers like Chrome for Android, whether Des ...

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

Is there still excess top padding or margin in Firefox after clearing the default reset for the <ul> element?

My floated horizontal list is looking great on IE and Opera, but for some reason, Firefox is adding extra padding or margin at the top. I'm not sure how to fix it. Everything was fine until I had to add a display:inline to an image link next to it to ...

Error: 'POST Request Processing Failure: Content-Type Missing'

My front end Canvas is transformed into a png file that needs to be POSTed to a third party vendor's API. The response comes back to Node as a base64 file which I decode, but upon attempting the upload, an error occurs: Error processing POST reques ...

"Upon invoking the console log, an empty value is being returned when attempting to access the

Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...

Responsive navigation menus can create confusion when hover and click events overlap

Check out my HTML5 responsive, 2-level menu by clicking HERE. The menu displays submenus on hover for wide screens and on click for narrow screens (less than 768px). The JavaScript function responsible for switching the events is shown below: function ho ...