From a14c90a7c51b597bb2a85e65f83bd39468de8b6d Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Mon, 19 Oct 2020 12:53:45 +0330
Subject: [PATCH 1/2] feat(runtime): catch image exceptions and prevent global
 crash

---
 playground/layouts/default.vue   |  1 +
 src/runtime/nuxt-image-mixins.ts | 33 ++++++++++++++++++++++----------
 src/runtime/nuxt-image.ts        |  5 +++++
 src/runtime/nuxt-picture.ts      |  5 +++++
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 8ce377279..ac0885afd 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -10,5 +10,6 @@ body {
   background: #111111;
   display: flex;
   flex-direction: column;
+  color: #ffffff;
 }
 </style>
diff --git a/src/runtime/nuxt-image-mixins.ts b/src/runtime/nuxt-image-mixins.ts
index 370057d5e..63174d66d 100644
--- a/src/runtime/nuxt-image-mixins.ts
+++ b/src/runtime/nuxt-image-mixins.ts
@@ -65,6 +65,7 @@ export default {
   },
   data () {
     return {
+      error: '',
       srcset: [],
       blurry: null,
       loading: false,
@@ -73,7 +74,7 @@ export default {
   },
   async fetch () {
     if (!this.legacy) {
-      this.blurry = await this.$img.lqip(this.src)
+      this.blurry = await this.getPlaceholder()
     }
   },
   mounted () {
@@ -132,7 +133,7 @@ export default {
   },
   watch: {
     async src () {
-      this.blurry = await this.$img.lqip(this.src)
+      this.blurry = await this.getPlaceholder()
       this.original = null
       if (!this.legacy) {
         this.$img.$observer.remove(this.$el)
@@ -144,15 +145,27 @@ export default {
     }
   },
   methods: {
+    getPlaceholder () {
+      try {
+        return this.$img.lqip(this.src)
+      } catch (e) {
+        this.error = e.message
+        return false
+      }
+    },
     generateSizedImage (width: number, height: number, format: string) {
-      const image = this.$img(this.src, {
-        width,
-        height,
-        format,
-        fit: this.fit,
-        ...this.operations
-      })
-      return encodeURI(image)
+      try {
+        const image = this.$img(this.src, {
+          width,
+          height,
+          format,
+          fit: this.fit,
+          ...this.operations
+        })
+        return encodeURI(image)
+      } catch (e) {
+        this.error = e.message
+      }
     },
     loadOriginalImage () {
       this.loading = true
diff --git a/src/runtime/nuxt-image.ts b/src/runtime/nuxt-image.ts
index d9fb8ea3d..63e591252 100644
--- a/src/runtime/nuxt-image.ts
+++ b/src/runtime/nuxt-image.ts
@@ -23,6 +23,11 @@ export default {
     }
   },
   render (h) {
+    if (this.error) {
+      return h('div', {
+        class: ['__nim_w'].concat(this.$attrs.class || '')
+      }, [this.error])
+    }
     if (this.legacy) {
       return this.renderLegacy(h)
     }
diff --git a/src/runtime/nuxt-picture.ts b/src/runtime/nuxt-picture.ts
index f73ddf5f1..afcc12f1d 100644
--- a/src/runtime/nuxt-picture.ts
+++ b/src/runtime/nuxt-picture.ts
@@ -26,6 +26,11 @@ export default {
     }
   },
   render (h) {
+    if (this.error) {
+      return h('div', {
+        class: ['__nim_w'].concat(this.$attrs.class || '')
+      }, [this.error])
+    }
     if (this.legacy) {
       return this.renderLegacy(h)
     }

From f256cbe58d84f0e45503ccc6e6b786a774fa23e5 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Mon, 19 Oct 2020 14:07:52 +0330
Subject: [PATCH 2/2] fix: unify error handle

---
 src/runtime/nuxt-image-mixins.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/runtime/nuxt-image-mixins.ts b/src/runtime/nuxt-image-mixins.ts
index 63174d66d..89c0927d7 100644
--- a/src/runtime/nuxt-image-mixins.ts
+++ b/src/runtime/nuxt-image-mixins.ts
@@ -149,7 +149,7 @@ export default {
       try {
         return this.$img.lqip(this.src)
       } catch (e) {
-        this.error = e.message
+        this.onError(e)
         return false
       }
     },
@@ -164,7 +164,8 @@ export default {
         })
         return encodeURI(image)
       } catch (e) {
-        this.error = e.message
+        this.onError(e)
+        return ''
       }
     },
     loadOriginalImage () {
@@ -180,6 +181,11 @@ export default {
         ...this.imgAttributes,
         ...extraAttributes
       })
+    },
+    onError (e: Error) {
+      this.error = e.message
+      // eslint-disable-next-line no-console
+      console.error(e.message)
     }
   },
   beforeDestroy () {