PDF does not show images : html2pdf library

Question

I use Angular 5 and html2pdf library which helps create pdf file. https://github.com/eKoopmans/html2pdf

this is used for my Angular method.

var element = document.getElementById('document');
var opt = {
    margin:       [10, 0, 10, 0],
    filename:     `document.pdf`,
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2, useCORS: true },
    jsPDF:        { unit: 'mm', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();

After exporting a pdf, I am unable to see any images from online but it shows locally stored images. Here is the example of image online. https://s3.amazonaws.com/images.anterasoftware.com/5b6c5886622d5Screen_Shot_2018-06-27_at_10.37.03_AM.png

Please help, Regards.

Answer 1

I saw you opened an issue on their github. I combed through the other issues and saw someone with a similar issue to yours. There are 3 or 4 proposed solutions here but I think the most promising is changing jpeg to jpg since that is not supported by html canvas. Here is the related github issue. https://github.com/eKoopmans/html2pdf/issues/105

Answer 2

In Angular it is worked for me after doing this...

1.add crossorigin="*" in img tag
2.add {useCORS: true} in html2canvas like 
html2canvas(document.querySelector('#pdf'), {useCORS: true})