bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.41k stars 505 forks source link

fix: switch lazy loading images to eager #359

Closed DustinBrett closed 1 year ago

DustinBrett commented 1 year ago

I noticed an issue with my images not loading. I traced it to neither onload or onerror firing during the embedImageNode step, which I was able to fix by changing the loading (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) attribute to eager instead of lazy as my images are.

Description

Add a condition during embedImageNode that changes lazy loading images to eager to ensure (ideally) that onload/onerror fires.

Motivation and Context

This problem occurs at least for me when I have an img which has loading (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) set to lazy. Changing this to eager stops the problem, so I've made this adjustment occur during cloning as we would not want to lazy loading images when we are trying to clone them and are waiting for them to finish decoding/loading.

Types of changes

Self Check before Merge

codecov[bot] commented 1 year ago

Codecov Report

Base: 63.24% // Head: 63.24% // No change to project coverage :thumbsup:

Coverage data is based on head (ce892e6) compared to base (1933175). Patch coverage: 0.00% of modified lines in pull request are covered.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #359 +/- ## ======================================= Coverage 63.24% 63.24% ======================================= Files 10 10 Lines 555 555 Branches 129 129 ======================================= Hits 351 351 Misses 146 146 Partials 58 58 ``` | [Impacted Files](https://codecov.io/gh/bubkoo/html-to-image/pull/359?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96) | Coverage Δ | | |---|---|---| | [src/embed-images.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/359?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2VtYmVkLWltYWdlcy50cw==) | `81.81% <0.00%> (ø)` | | Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96)

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

vivcat[bot] commented 1 year ago

:tada: This PR is included in version 1.11.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket: