Image Issue with Tables

Hello Team

I hope you are doing well. I have used your NPM library html-to-docx for converting html templates to docx files. I am facing some issues with inserting images into them. I have tried multiple ways of inserting images inside html.

1. Absolute URL - Links to an external image that is hosted on another website
2. Relative URL - Links to an image that is hosted within the website. The above two methods didn’t work for me. Then I tried with the base64 image data source and it worked for me. Now, when I am using base64 images within html template, I am facing some issues with the tables. The table border disappears and I am not getting the docx generated correctly. While if I do not insert any image to the html template, then the tables are working fine. I am using the official MS office to view the docs.

I have shared two sample docx files one with image and one without image.

The sample source code to insert an image - <table style="width: 100%; border: none; border-spacing: 0; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"> <tr style="border-collapse: collapse; border-spacing: 0;"> <td style="padding: 0px; margin: 0px; text-align: left; border-collapse: collapse; border-spacing: 0;" align="left"> <h1 style="color: #161950; font-size: 35px; font-weight: bold;">Tesla, Inc.</h1> <p style="color: #6565aa; font-size: 18px; font-family: 'Helvetica'; line-height: 17px; margin: 5px 0 20px; letter-spacing: 0px;">Company Snapshot</p> </td> <td style="padding: 0px; margin: 0px; text-align: right; border-collapse: collapse; border-spacing: 0;" align="right"> <img src="data:image/png;base64,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" /> </tr> </table>

Can you please look into this issue and why there are table border issues when I am trying to insert an image in the html template.

Looking forward to hearing from you.

Snapshot-without-image.docx Snapshot-with-image.docx

[gaganjot-kaur3197]

Thanks @privateOmega for quick help. We will look into this. Please update once when you will work on external images support.

[nicolasiscoding]

@privateOmega been watching this repo for a bit, isn’t this addressed in #148 ?