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>
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]

https://github.com/nuxt/image/pull/1834

Should this be enough?