feat: emit native <img> events (#416)

docs/content/en/3.api/3.events.md

@@ -0,0 +1,18 @@
+---
+title: Events
+category: API
+description: 'Listening to native events emitted by the contained img tag'
+---
+
+Native events emitted by the `<img>` element contained by `<nuxt-img>` and `<nuxt-picture>` components are re-emitted and can be listened to.
+
+**Example:** Listen to the native `onLoad` event from `<nuxt-img>`
+
+```html
+<nuxt-img
+  src="/images/colors.jpg"
+  width="500"
+  height="500"
+  @load="doSomethingOnLoad"
+/>
+```

playground/pages/nuxt-img.vue

@@ -1,5 +1,18 @@
 <template>
   <div>
-    <nuxt-img src="/images/colors.jpg" width="500" height="500" />
+    <nuxt-img src="/images/colors.jpg" width="500" height="500" @load="isLoaded = true" />
+    <p>Received onLoad event: {{ isLoaded }}</p>
   </div>
 </template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data () {
+    return {
+      isLoaded: false
+    }
+  }
+})
+</script>

playground/pages/nuxt-picture.vue

@@ -1,5 +1,18 @@
 <template>
   <div>
-    <nuxt-picture src="/images/colors.jpg" width="500" height="500" />
+    <nuxt-picture src="/images/colors.jpg" width="500" height="500" @load="isLoaded = true" />
+    <p>Received onLoad event: {{ isLoaded }}</p>
   </div>
 </template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data () {
+    return {
+      isLoaded: false
+    }
+  }
+})
+</script>

src/runtime/components/nuxt-img.vue

@@ -1,9 +1,5 @@
 <template>
-  <img
-    :key="nSrc"
-    :src="nSrc"
-    v-bind="nAttrs"
-  >
+  <img :key="nSrc" :src="nSrc" v-bind="nAttrs" v-on="$listeners">
 </template>
 
 <script lang="ts">

src/runtime/components/nuxt-picture.vue

@@ -11,6 +11,7 @@
       :src="nSources[0].src"
       :srcset="nSources[0].srcset"
       :sizes="nSources[0].sizes"
+      v-on="$listeners"
     >
   </picture>
 </template>

test/e2e/no-ssr.test.ts

@@ -33,6 +33,14 @@ describe('browser (ssr: false)', () => {
     expect(negativeRequest).toBeFalsy()
   })
 
+  test('should emit load event', async () => {
+    await page.waitForEvent('console', (msg) => {
+      expect(msg.text()).toBe('Image was loaded.')
+
+      return true
+    })
+  })
+
   test('change image location', async () => {
     await page.click('#button')
     const positiveRequest = requests.find(request => request.match('/_ipx/s_300x200/1280px-K2_2006b.jpg'))

test/fixture/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     It works
-    <nuxt-img :src="image" width="300" height="200" />
+    <nuxt-img :src="image" width="300" height="200" @load="onLoad" />
     <button id="button" @click="changeImage">
       Change Image
     </button>
@@ -18,6 +18,9 @@ export default {
   methods: {
     changeImage () {
       this.image = '/1280px-K2_2006b.jpg'
+    },
+    onLoad () {
+      console.log('Image was loaded.')
     }
   }
 }