Force recreating the img element to show LQIP styles

[simonihmig]

<img> element is reused across renders, when no LQIP is used. Otherwise DOM recreation is enforced to wipe out the state of the previously loaded image.

Fixes #1583, in particular #1583 (comment).

Added a rerender test case where this was missing, and added assertions for DOM reuse (default) or DOM recreation (LQIP).

[changeset-bot]

🦋 Changeset detected

Latest commit: c97ca84

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@responsive-image/svelte	Patch
@responsive-image/ember	Patch
@responsive-image/react	Patch
@responsive-image/solid	Patch
@responsive-image/wc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[simonihmig]

@wkillerud completed the PR to cover all frameworks, if you want to give this another review!

It's not looking quite beautiful in all cases, React and Ember needed some shenanigans, for the rest it was rather straightforward as they had explicit support for the concept of key/keyed, even for a single element. But it works everywhere it seems, without any manual DOM manipulation workarounds.

Other use case for recreating DOM elements was mentioned btw: forcing new animations/transitions. See https://lit.dev/docs/templates/directives/#keyed and https://svelte.dev/docs/svelte/key.

[sonarqubecloud]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wkillerud]

Nice work digging into all of these frameworks! 🎉 Looks good to me 👍