aboutsummaryrefslogtreecommitdiff
path: root/src/components/still-image
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/still-image')
-rw-r--r--src/components/still-image/still-image.js11
-rw-r--r--src/components/still-image/still-image.vue10
2 files changed, 16 insertions, 5 deletions
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 8044e994..d7abbcb5 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -5,7 +5,9 @@ const StillImage = {
'mimetype',
'imageLoadError',
'imageLoadHandler',
- 'alt'
+ 'alt',
+ 'height',
+ 'width'
],
data () {
return {
@@ -15,6 +17,13 @@ const StillImage = {
computed: {
animated () {
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+ },
+ style () {
+ const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
+ return {
+ height: this.height ? appendPx(this.height) : null,
+ width: this.width ? appendPx(this.width) : null
+ }
}
},
methods: {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 0623b42e..ab3080c8 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -2,6 +2,7 @@
<div
class="still-image"
:class="{ animated: animated }"
+ :style="style"
>
<canvas
v-if="animated"
@@ -18,6 +19,7 @@
@load="onLoad"
@error="onError"
>
+ <slot />
</div>
</template>
@@ -56,10 +58,10 @@
zoom: var(--_still_image-label-scale, 1);
content: 'gif';
position: absolute;
- line-height: 10px;
- font-size: 10px;
- top: 5px;
- left: 5px;
+ line-height: 1;
+ font-size: 0.7em;
+ top: 0.5em;
+ left: 0.5em;
background: rgba(127, 127, 127, 0.5);
color: #fff;
display: block;