feat: support placeholder (#477)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
nuxt · Jun 21, 2022 · fc7e3d5 · fc7e3d5
1 parent 94625ce
commit fc7e3d5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/playground/pages/nuxt-img.vue b/playground/pages/nuxt-img.vue
@@ -1,7 +1,22 @@
 <template>
   <div>
-    <nuxt-img src="/images/colors.jpg" width="500" height="500" @load="isLoaded = true" />
+    <h1>Original</h1>
+    <nuxt-img
+      src="/images/colors.jpg"
+      width="500"
+      height="500"
+      @load="isLoaded = true"
+    />
     <p>Received onLoad event: {{ isLoaded }}</p>
+
+    <h1>Placeholder</h1>
+    <nuxt-img
+      :src="src"
+      placeholder
+      width="500"
+      height="500"
+      @load="isLoaded = true"
+    />
   </div>
 </template>
 
@@ -11,7 +26,9 @@ import Vue from 'vue'
 export default Vue.extend({
   data () {
     return {
-      isLoaded: false
+      isLoaded: false,
+      src:
+        'https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'
     }
   }
 })

diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :key="nSrc" :src="nSrc" v-bind="nAttrs" v-on="$listeners">
+  <img :key="nSrc" v-bind="nAttrs" ref="img" :src="nSrc" v-on="$listeners">
 </template>
 
 <script lang="ts">
@@ -19,6 +19,9 @@ type NAttrs = typeof imageMixin['nImgAttrs'] & {
 export default defineComponent({
   name: 'NuxtImg',
   mixins: [imageMixin],
+  props: {
+    placeholder: { type: [Boolean, String, Number, Array], default: undefined }
+  },
   head () {
     if (this.preload === true) {
       return {
@@ -42,7 +45,7 @@ export default defineComponent({
       }
       return attrs
     },
-    nSrc (): string {
+    nMainSrc (): string {
       return this.sizes ? this.nSizes.src : this.$img(this.src, this.nModifiers, this.nOptions)
     },
     /* eslint-disable no-undef */
@@ -56,9 +59,36 @@ export default defineComponent({
           height: parseSize(this.height)
         }
       })
+    },
+    nSrc (): string {
+      return this.nPlaceholder ? this.nPlaceholder : this.nMainSrc
+    },
+    nPlaceholder () {
+      let placeholder = this.placeholder
+      if (placeholder === '') { placeholder = true }
+      if (!placeholder || this.placeholderLoaded) { return false }
+      if (typeof placeholder === 'string') { return placeholder }
+      const size = (Array.isArray(placeholder)
+        ? placeholder
+        : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number]
+      return this.$img(this.src, {
+        ...this.nModifiers,
+        width: size[0],
+        height: size[1],
+        quality: size[2] || 50
+      }, this.nOptions)
     }
   },
-  created () {
+  mounted () {
+    if (this.nPlaceholder) {
+      const img = new Image()
+      img.src = this.nMainSrc
+      img.onload = () => {
+        // @ts-ignore
+        this.$refs.img.src = this.nMainSrc
+        this.placeholderLoaded = true
+      }
+    }
     if (process.server && process.static) {
       if (this.sizes) {
         // Force compute sources into ssrContext