unfinished fetch() version that doesn't work

src/components/still-image/still-image.js

@@ -12,16 +12,27 @@ const StillImage = {
     }
   },
   computed: {
-    animated () {
-      return this.mimetype === 'image/gif'
+    animated: {
+      get () {
+        // If mimetype is gif then it is certainly animated, if it's undefined - we don't know YET
+        return this.mimetype === 'image/gif' ? true : this.mimetype == null ? 'maybe' : false
+      },
+      set (val) {
+        this.mimetype = val
+      }
     }
   },
   methods: {
-    drawCanvas() {
+    onLoad () {
       const canvas = this.$refs.canvas
       if (!canvas) return
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
+      canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
+      if (this.animated === 'maybe') {
+        fetch(this.src).then((data) => {
+          console.log(data)
+          this.animated = data.type
+        })
+      }
     }
   }
 }

src/components/still-image/still-image.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='still-image' :class='{ animated: animated }' >
     <canvas ref="canvas" v-if="animated"></canvas>
-    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="drawCanvas"/>
+    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad"/>
   </div>
 </template>
 
@@ -31,9 +31,10 @@
             position: absolute;
             top: 5px;
             left: 5px;
-            background: rgba(255,255,255,.5);
+            background: rgba(127,127,127,.7);
             display: block;
             padding: 2px;
+            border-radius: 3px;
             z-index: 2;
         }
     }