fix img upload from url, revert webp

components/MyPicture.vue

@@ -1,16 +1,14 @@
 <template>
-<figure :class='{ thumb, img: true }' 
+<div :class='{ thumb, img: true }' 
     :height="height" :width="width"
     :style="backgroundPreview">
 
-  <picture>
-    <source :srcset="srcset" type='image/webp' />
-
     <img 
       v-if='media' 
       :class='{ "u-featured": true, loading }'
       :alt='media.name' :loading='lazy?"lazy":"eager"'
       :src="src"
+      :srcset="srcset"
       itemprop="image"
       :height="height" :width="width"
       :style="{ 'object-position': thumbnailPosition }"
@@ -18,10 +16,8 @@
 
     <img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
 
-  </picture>
 
-
-</figure>
+</div>
 </template>
 <script>
 
@@ -43,6 +39,10 @@ export default {
           backgroundImage: "url('data:image/png;base64," + this.media.preview + "')" }
       }
     },
+    srcset () {
+      if (this.thumb) return ''
+      return `/media/thumb/${this.media.url} 500w, /media/${this.media.url} 1200w`
+    },
     media () {
       return this.event.media[0]
     },
@@ -54,15 +54,12 @@ export default {
     },
     src () {
       if (this.media) {
-        return '/media/' + (this.thumb ? 'thumb/' : '') + this.media.url
+        return '/media/thumb/' + this.media.url
       }
       if (this.thumb) {
         return '/noimg.svg'
       }
     },
-    srcset () {
-      return this.src.replace(/.jpg$/, '.webp')
-    },
     thumbnailPosition () {
       if (this.media.focalpoint) {
         const focalpoint = this.media.focalpoint
@@ -90,11 +87,12 @@ export default {
 }
 
 .img img {
+  display: flex;
   width: 100%;
   max-width: 100%;
   height: auto;
   overflow: hidden;
-  transition: opacity 1s;
+  transition: opacity .5s;
   opacity: 1;
   background-size: 100%;
 }
@@ -108,12 +106,7 @@ export default {
   aspect-ratio: 1.7778;
 }
 
-.img picture {
-  width: 100%;
-  display: flex;
-}
-
-.img picture img.loading {
+.img img.loading {
   opacity: 0;
 }