Converting HTML containing img elements to PNG results in images not loading

Expected Behavior

When converting HTML that contains <img> elements, the <img> elements should always complete loading before the HTML is converted to an image.

Current Behavior

In some situations, specifically with Twitter profile pictures as the source, the <img> elements do not load in time, and when the HTML is converted to a, say PNG for example, the image(s) are not present.

Some images load just fine, just not these, which kinda sucks – I need Twitter profile pics to load.

Possible Solution

This must be a result of the sequence of events that occur when a function like toPng is called. I have attempted to convert the HTML to a blob instead, and the same issue prevails.

Steps To Reproduce

1. Create an HTML <img src="https://pbs.twimg.com/profile_images/1354479643882004483/Btnfm47p_bigger.jpg"/> element. This source is good because it is a situation where the image will not appear.
2. Convert HTML to PNG
3. Save PNG to computer.

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

I am creating a basic application that allows users to paste in a link to a Tweet, where my application will then render the contents of the Tweet on a React component on a customizable background. Once they have customized the Tweet and background to their liking, they can choose to export it as a PNG.

The HTML page, showing the Tweet component:

The resulting image (exported as PNG): This branch contains my features I implemented. components/SnippetPreview.tsx contains the logic for exporting.

Your Environment

• html-to-image: 1.9.0
• OS: Windows 10, macOS, etc.
• Browser: Firefox, Chrome, Brave, all of them.

[delia-m]

I had same issue with toJpeg and just worked round to use div and set image as a background rather than using img element This worked for me but it would be great if img element is working

[vivcat[bot]]

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯