如何在NuxtImg的底层img元素上设置ref？

直接给NuxtImg组件添加ref，拿到的是NuxtImg组件本身的实例，而非渲染后生成的底层<img>标签——而且ref是Vue内部的引用标识，不会被渲染成DOM属性，所以你在浏览器开发者工具里看不到带ref属性的img元素。

解决方法有两种：

方法一：通过组件实例获取底层img #

在组件脚本中（以Vue 3 <script setup>为例）：

import { ref, onMounted, nextTick } from 'vue'

const thelogo = ref(null)

onMounted(async () => {
  // 等待DOM更新完成
  await nextTick()
  // 从组件实例的根元素中找到img标签
  const imgElement = thelogo.value.$el.querySelector('img')
  // 这里即可将imgElement传递给着色器组件
})

模板中保留原有的ref绑定：

<NuxtImg 
  src="/thelogo.png" 
  ref="thelogo"
  loading="lazy" 
  format="webp" 
  quality="100" 
  sizes="50vw sm:60vw md:500px" 
  densities="x1 x2"
/>

方法二：通过load事件直接获取img元素 #

利用图片加载完成的事件，直接从事件参数中拿到目标img元素：

<NuxtImg 
  src="/thelogo.png" 
  loading="lazy" 
  format="webp" 
  quality="100" 
  sizes="50vw sm:60vw md:500px" 
  densities="x1 x2"
  @load="handleImgLoad"
/>

脚本中处理事件：

const handleImgLoad = (e) => {
  const imgElement = e.target
  // 将imgElement传递给着色器组件
}

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson