使用nuxt-img时如何检测图片是否加载完成？

方法1：通过模板引用访问原生img的complete属性 #

nuxt-img最终会渲染出原生img元素，你可以通过模板引用获取组件实例，再定位到内部的img标签来检查complete属性，以此判断图片是否已缓存/预加载完成。

示例代码：

<template>
  <nuxt-img
    ref="imageRef"
    src="/your-image.jpg"
    @load="handleImageLoad"
    class="opacity-0 transition-opacity duration-500"
  />
</template>

<script setup>
const imageRef = ref(null)

onMounted(() => {
  const imgElement = imageRef.value?.$el.querySelector('img')
  if (imgElement?.complete) {
    // 图片已缓存，直接触发淡入
    handleImageLoad()
  }
})

const handleImageLoad = () => {
  const imgElement = imageRef.value?.$el.querySelector('img')
  imgElement?.classList.remove('opacity-0')
}
</script>

<style>
.opacity-0 { opacity: 0; }
.transition-opacity { transition: opacity 0.5s ease-in-out; }
</style>

方法2：结合状态管理简化逻辑 #

通过响应式状态控制图片透明度，同时在组件挂载时检查缓存状态，避免load事件不触发的问题：

<template>
  <nuxt-img
    ref="imageRef"
    src="/your-image.jpg"
    @load="isLoaded = true"
    :class="{
      'opacity-0': !isLoaded,
      'opacity-100': isLoaded,
      'transition-opacity': true
    }"
  />
</template>

<script setup>
const isLoaded = ref(false)
const imageRef = ref(null)

onMounted(() => {
  const imgElement = imageRef.value?.$el.querySelector('img')
  if (imgElement?.complete) {
    isLoaded.value = true
  }
})
</script>

<style>
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.transition-opacity { transition: opacity 0.5s ease; }
</style>

方法3：封装自定义指令复用逻辑 #

如果多个组件需要该淡入效果，可以封装一个自定义指令，统一处理缓存检查和加载监听：

// plugins/fadeImage.js
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.directive('fade-on-load', {
    mounted(el) {
      const img = el.querySelector('img')
      const showImage = () => el.classList.remove('opacity-0')

      if (img?.complete) {
        showImage()
      } else {
        img?.addEventListener('load', showImage)
        // 组件卸载时清理监听
        el._removeListener = () => img?.removeEventListener('load', showImage)
      }
    },
    unmounted(el) {
      el._removeListener?.()
    }
  })
})

在组件中直接使用：

<template>
  <nuxt-img
    v-fade-on-load
    src="/your-image.jpg"
    class="opacity-0 transition-opacity duration-500"
  />
</template>

注意事项 #

• 优先使用模板引用定位img元素，比全局document.querySelector更精准，避免多图片场景下的冲突。
• 确保CSS过渡属性正确设置，初始状态为透明，加载完成后切换为完全不透明。

内容的提问来源于stack exchange，提问作者muell