Image from a link not showing in html2pdf

Question

I'm trying to generate a pdf in javascript using html2pdf that I installed using npm. The problem is that it will not show my images that comes from an url in my pdf. Here is my code:

And here is a sandbox showing the issue: https://codesandbox.io/s/html2pdf-not-loading-image-gvmx0u

As you can see when you click on "export in pdf" the image hard coded in the content variable didn't get into the file..

The result is a pdf file with blank spaces instead of images. Does anyone know how to get my images into the pdf ? Is there a better library in js to build pdf from html ?

Answer 1

For those wondering I resolved the problem by converting images in Base64 and use promises to put it in the html content of the html2pdf.

The whole answer is available in the sandbox of the original question: https://codesandbox.io/s/html2pdf-not-loading-image-gvmx0u

Here are the sources that helped (as well as what @KJ told me in the comments):

How to convert images in base64: https://stackoverflow.com/a/20285053/5065874

How to await the xmlhhtprequest: In JavaScript how do I/should I use async/await with XMLHttpRequest?

Again, thank you KJ for the help !