expose image element on nuxtImg through defineExpose

Author: Leonardo Rick

src/runtime/components/NuxtImg.vue

@@ -132,6 +132,9 @@ if (import.meta.server && import.meta.prerender) {
 
 const initialLoad = useNuxtApp().isHydrating
 const imgEl = useTemplateRef('imgEl')
+
+defineExpose({ imgEl })
+
 onMounted(() => {
   if (placeholder.value || props.custom) {
     const img = new Image()

test/nuxt/image.test.ts

@@ -153,6 +153,17 @@ describe('Renders simple image', () => {
     const domNonce = img.element.getAttribute('nonce')
     expect(domNonce).toBe('stub-nonce')
   })
+
+  it.only('can access imgEl underlying img HTMLImageElement', () => {
+    const img = mountImage({
+      src: '/image.png',
+      width: 300,
+      height: 400,
+      nonce: 'stub-nonce',
+    })
+    expect(img.getCurrentComponent().exposed?.imgEl).toBeDefined()
+    expect(img.getCurrentComponent().exposed?.imgEl.value).toBeInstanceOf(HTMLImageElement)
+  })
 })
 
 const getImageLoad = (cb = () => {}) => {