From 32346f4ba5a4c1d9f30ca56fdab3d4e2915ba0e8 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 25 Apr 2022 17:19:25 +0100
Subject: [PATCH] FIX: Ensure lazy-load-images does not remove entire
`img.style` (#16553)
Other things may have added things to the style attribute (e.g. the `image-aspect-ratio` decorator).
Unfortunately this is difficult to add a test for because `lazy-load-images` leans on the `onload` event. We have no control over image loading in tests, so race conditions would be very likely.
---
.../javascripts/discourse/app/lib/lazy-load-images.js | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
index a0a2bc0fdc6..e4c523f8723 100644
--- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
+++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
@@ -18,11 +18,16 @@ export function nativeLazyLoading(api) {
if (!img.complete) {
if (!img.onload) {
img.onload = () => {
- img.removeAttribute("style");
+ img.style.removeProperty("background-image");
+ img.style.removeProperty("background-size");
};
}
- img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`;
+ img.style.setProperty(
+ "background-image",
+ `url(${img.dataset.smallUpload});`
+ );
+ img.style.setProperty("background-size", "cover");
}
}
}),