Expose a reference of the underlying img HTMLElement

[Rigo-m]

Proposal

<nuxt-img /> and <nuxt-picture /> should expose in some way the underlying <img /> HTMLElement.

Why would I need this?

As pointed out here: Imgix blurhash issue, I'm displaying a blurhashed image on top of <nuxt-img />, and I need to un-show it either if the image has been loaded (i.e. it's already present because of cache) or after the onload event.
I've attached a ref to <nuxt-img /> and then I've searched for the <img /> element underneath to check image.complete attribute, but it feels a little bit clunky.
How can we handle this better?

[everyx]

I also have the same problem, it seems to be that the nuxt-img component in SSR mode will not emit onload when the page first load.

ref: #682

[nathanchase]

I have the same issue. I'd like to use the placeholder attribute of NuxtImg, but then have the actual loaded image fade in when it has loaded, rather than "pop" in over the placeholder.

@Rigo-m How did you reference the img inside NuxtImg?

I tried this, but it's not quite right:

const nuxtImageRef = ref<HTMLElement | null>(null);

const doSomethingOnLoad = () => {
  const imgElement = nuxtImageRef.value?.querySelector('img');

  if (imgElement) {
    imgElement.classList.add('loaded');
  }
};

[Rigo-m]

Hi Nathan, what version are you using of nuxt and nuxt image?

[nathanchase]

Hi Nathan, what version are you using of nuxt and nuxt image?

nuxt: 3.8.0
@nuxt/image: 1.0.0

[nathanchase]

Seems like Vue 3's defineExpose might be a possibility? https://vuejs.org/api/sfc-script-setup.html#defineexpose

To explicitly expose properties in a <script setup> component, use the defineExpose compiler macro:

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape { a: number, b: number } (refs are automatically unwrapped just like on normal instances).

Perhaps <NuxtImg> can expose a ref to the img this way?

[LeonardoRick]

#1834

Should this be enough?

[LeonardoRick]

This issue can be closed as the feature was implemented in the mentioned PR

[Anoesj]

Unfortunately the exposed imgEl ref is untyped (any) and usage of the exposed ref was documented wrong in the Nuxt Image changelog for version 2.0.0:

Template refs

now exposes the underlying element via template refs:

<template>
  <NuxtImg ref="imgEl" src="/image.jpg" />
</template>

<script setup>
const imgEl = ref()

onMounted(() => {
  // Direct access to the native img element
  console.log(imgEl.value)
})
</script>

This should have been:

<template>
  <NuxtImg ref="imgEl" src="/image.jpg" />
</template>

<script setup>
const imgEl = ref()
// or even better when using TypeScript:
const imgEl = useTemplateRef('imgEl')

onMounted(() => {
  // Direct access to the native img element
  // Unfortunately this is still typed as `any`
  console.log(imgEl.value.imgEl)
})
</script>

[DamianGlowala]

@Anoesj thank you for pointing it out, v2.0.0 release notes have been corrected.