viewer: when loading a picture, displays a preview based on the thumbnail on slow connections

This works on Chrome, but FireFox presents some issues:
- the picture background is sometimes white instead of transparent, hidding the background
- image-orientation doesn't work for background pictures or for negative values

1 files changed, 8 insertions, 6 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index b418911..5de5946 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -96,10 +96,12 @@ img {
 
 // === Effect to apply on lazy-image loading
 
-.v-lazy-image {
-  opacity: 0;
-  transition: opacity 0.4s;
-}
-.v-lazy-image-loaded {
-  opacity: 1;
+img {
+  &.v-lazy-image {
+    opacity: 0;
+    transition: opacity 0.4s;
+  }
+  &.v-lazy-image-loaded {
+    opacity: 1;
+  }
 }