fix(runtime): fix runtime behavior

nuxt · Oct 4, 2020 · 0ed7625 · 0ed7625
1 parent 19e6157
commit 0ed7625
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 18 deletions.
diff --git a/src/runtime/nuxt-image-mixins.ts b/src/runtime/nuxt-image-mixins.ts
@@ -115,12 +115,17 @@ export default {
           height: this.height ? parseInt(this.height, 10) : undefined
         }]
       }
-      sizes = sizes.map(size => ({
-        ...size,
-        media: size.media || size.breakpoint ? `(min-width: ${size.breakpoint}px)` : '',
-        format: size.format || this.format,
-        url: this.generateSizedImage(size.width, size.height, size.format || this.format)
-      }))
+
+      sizes = sizes.map((size) => {
+        if (!size.format) {
+          size.format = this.format
+        }
+        if (!size.media) {
+          size.media = size.breakpoint ? `(min-width: ${size.breakpoint}px)` : ''
+        }
+        size.url = this.generateSizedImage(size.width, size.height, size.format)
+        return size
+      })
 
       return sizes
     }
@@ -129,11 +134,13 @@ export default {
     async src () {
       this.blurry = await this.$img.lqip(this.src)
       this.original = null
-      this.$img.$observer.remove(this.$el)
-      this.$img.$observer.add(this.$el, () => {
+      if (!this.legacy) {
+        this.$img.$observer.remove(this.$el)
+        this.$img.$observer.add(this.$el, () => {
         // OK, element is visible, Hoooray
-        this.loadOriginalImage()
-      })
+          this.loadOriginalImage()
+        })
+      }
     }
   },
   methods: {
@@ -163,6 +170,8 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$img.$observer.remove(this.$el)
+    if (!this.legacy) {
+      this.$img.$observer.remove(this.$el)
+    }
   }
 }
diff --git a/src/runtime/nuxt-image.css b/src/runtime/nuxt-image.css
@@ -13,17 +13,17 @@
   transition: opacity 800ms ease 0ms;
   object-fit: cover;
 }
-.__nim_full {
+.__nim_w.__nim_full {
   width: 100%;
   height: 100%;
 }
-.__nim_blur {
+.__nim_w .__nim_blur {
   filter: blur(25px);
   transform: scale(1.1);
   opacity: 1;
 }
 
-.__nim_org,
+.__nim_w .__nim_org,
 .__nim_w.visible .__nim_blur {
   opacity: 0;
 }

diff --git a/src/runtime/nuxt-image.ts b/src/runtime/nuxt-image.ts
@@ -77,7 +77,7 @@ export default {
   methods: {
     renderLegacy (h) {
       return h('img', {
-        class: '',
+        class: '__nim_org',
         attrs: {
           src: this.generatedSrc,
           srcset: this.generatedSrcset,

diff --git a/src/runtime/nuxt-picture.ts b/src/runtime/nuxt-picture.ts
@@ -4,7 +4,7 @@ import './nuxt-image.css'
 
 const pictureHTML = ({ generatedSrc, width, height, renderImgAttributesToString, sizes, renderAttributesToString }) =>
 `<picture>
-${sizes.map(s => `<source ${renderAttributesToString({ type: s.type, media: s.media, srcset: s.url })}>`).join('\n')}
+${sizes.map(s => `<source ${renderAttributesToString({ type: s.format, media: s.media, srcset: s.url })}>`).join('\n')}
 <img class="__nim_org" ${renderImgAttributesToString({ src: generatedSrc, width, height })}>
 </picture>
 `
@@ -54,7 +54,7 @@ export default {
     const sources = this.sizes.map(size => h('source', {
       attrs: {
         srcset: size.url,
-        type: size.type ? size.type : undefined,
+        type: size.format ? size.format : undefined,
         media: size.media ? size.media : undefined
       }
     }))
@@ -91,7 +91,7 @@ export default {
       const sources = this.sizes.map(size => h('source', {
         attrs: {
           srcset: size.url,
-          type: size.type ? size.type : undefined,
+          type: size.format ? size.format : undefined,
           media: size.media ? size.media : undefined
         }
       }))