JSPDF doesn't add images with online src

[panagulis72]

In a web application I'm using JSPDF to convert the html to pdf. All works fine, except for the images. After a while, I noticed that it adds images that point to a local resource; instead, it does not add images that point to an online resource, and leaves in the place of the image an empty space, as if he expected it but could not load it.

For example: <img src="img/house.jpg"/> is correctly added. <img src="https://myurl.com/house.jpg"/> is not correctly added; there is an empty space instead of the image.

P.S. I'm using doc.addHTML().

How can I solve it? Maybe store the image temporarily in local? I tried using addImage() but it is very hard to use, not only because I change the scale factor of pdf, but primarily because the content of the pdf is dynamic, and I do not know what size the images will have or their exact position.

[Uzlopak]

CORS-Restriction?

[panagulis72]

No it isn't. Or however I don't guess so, because I can see the image in the html code and in the browser.

But, maybe, I found a solution or a workaround though. I used this online service (https://www.askapache.com/online-tools/base64-image-converter/) just for test. I converted the url of the image to base64 and I overwritten the src="https://...." with src="base64...." and it works!

[Uzlopak]

It should be actually CORS-Restriction, which is heavily active in javascript.

Closed it, because you wrote you found a solution. If you have further question, I will reopen.

[muhammadmohie]

I have the same problem here, it's very hard and impractical to deal with base64 of all links in the HTML content.
Any help?

[uncloak]

same, this is a quite bad workaround, we need a permanent solution

[shahzaib-cd]

No it isn't. Or however I don't guess so, because I can see the image in the html code and in the browser.

But, maybe, I found a solution or a workaround though. I used this online service (https://www.askapache.com/online-tools/base64-image-converter/) just for test. I converted the url of the image to base64 and I overwritten the src="https://...." with src="base64...." and it works!

Thanks @panagulis72, it worked for me.

[gauravsoftuvo]

@Uzlopak Base64 solution works fine for static images, but, I becomes a problem while dealing with dynamic data.
Can you please open this ticket as we would love to have a sustainable solution.

[fitimsijarinaa]

Is the issue fixed already? Or is there a workaround for the issue?

[pachuley]

Still no fix for this issue?

[anuroop-mallick]

I am facing the same issue. I need to add multiple images after fetcing the urls from api. It loads on html but when convrting to pdf it does not render it.

This is what my network tab says. It shows CORS error when generatiin the pdf. All other html content is rendering on the pdf.
Please.. any help?

[mohammedThouheedIt]

@anuroopmallick9 or others, did you guys find any solution ?