aboutsummaryrefslogtreecommitdiff
path: root/src/components/still-image/still-image.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/still-image/still-image.vue')
-rw-r--r--src/components/still-image/still-image.vue12
1 files changed, 7 insertions, 5 deletions
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index ab3080c8..fc46fbe6 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -11,11 +11,13 @@
<!-- NOTE: key is required to force to re-render img tag when src is changed -->
<img
ref="src"
- :key="src"
+ :key="realSrc"
:alt="alt"
:title="alt"
- :src="src"
+ :data-src="dataSrc"
+ :src="realSrc"
:referrerpolicy="referrerpolicy"
+ :loading="loading"
@load="onLoad"
@error="onError"
>
@@ -26,7 +28,7 @@
<script src="./still-image.js"></script>
<style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
.still-image {
position: relative;
@@ -56,13 +58,13 @@
&.animated {
&::before {
zoom: var(--_still_image-label-scale, 1);
- content: 'gif';
+ content: "gif";
position: absolute;
line-height: 1;
font-size: 0.7em;
top: 0.5em;
left: 0.5em;
- background: rgba(127, 127, 127, 0.5);
+ background: rgb(127 127 127 / 50%);
color: #fff;
display: block;
padding: 2px 4px;