Vue V-Lazy-Image插件相对路径加载图片异常求助

嘿，我刚好碰到过类似的坑，咱们来一步步拆解搞定这个问题！

首先明确核心问题：用相对路径时图片能加载，但@load事件完全不触发，导致.v-lazy-image-loaded类加不上，图片一直糊着；只有完整URL能正常触发事件、移除模糊效果。

问题根源排查 #

从你的代码里能发现几个关键疑点：

1. 你封装了LazyImage.vue组件，但没把父组件绑定的事件透传给底层的v-lazy-image；
2. 直接传字符串相对路径时，webpack没处理这个资源路径，插件可能无法正确监听图片加载状态；
3. 用require()的方式时，虽然路径正确，但可能因为插件缓存处理或事件透传问题，导致load事件没触发。

解决方案步骤 #

1. 先去掉封装，验证原始插件的行为 #

先暂时不用自己封装的LazyImage.vue，直接在Portfolio.vue里导入原始的v-lazy-image测试：

<template>
  <section id="portfolio">
    <v-lazy-image 
      :src="require('../assets/img/innovation.jpg')" 
      alt="alternate text" 
      @load="consoleSuccess('LOADED!')" 
      @intersect="consoleSuccess('INTERSECS!')"
    ></v-lazy-image>
  </section>
</template>
<script>
// 直接导入原始插件
import VLazyImage from 'v-lazy-image'
export default {
  components: {
    VLazyImage
  },
  methods: {
    consoleSuccess (msg) {
      console.log(msg)
    }
  }
}
</script>

如果这样能正常触发@load事件，并且图片移除模糊效果，那问题肯定出在你的封装组件上。

2. 修复封装组件的事件透传 #

如果要保留封装，必须把父组件绑定的所有事件透传给底层的v-lazy-image，修改LazyImage.vue：

<template>
  <!-- 用v-on="$listeners"自动透传所有事件 -->
  <v-lazy-image :src="src" v-on="$listeners" />
</template>
<script>
import VLazyImage from 'v-lazy-image'
export default {
  props: {
    src: String
  },
  components: {
    VLazyImage
  }
}
</script>

v-on="$listeners"会自动把父组件绑定的@load、@intersect等事件传递给子组件，这样事件就能正常触发了。

3. 正确处理Vue静态资源路径 #

Vue中引用本地静态资源时，直接写字符串相对路径（比如src="../assets/img/innovation.jpg"）不会被webpack处理，因为它只是普通字符串。必须用require()或者import引入，让webpack把资源复制到输出目录并返回正确URL：

• 方式一：直接在模板里用require()

<v-lazy-image :src="require('../assets/img/innovation.jpg')" alt="alternate text" />

• 方式二：在script里导入资源

<script>
import innovationImg from '../assets/img/innovation.jpg'
export default {
  data() {
    return {
      imgSrc: innovationImg
    }
  }
}
</script>
<template>
  <v-lazy-image :src="imgSrc" alt="alternate text" />
</template>

4. 处理图片缓存导致的load事件不触发 #

如果图片已经在浏览器缓存里，load事件可能不会触发，这时候需要手动检查图片的complete状态。可以给封装组件加个mounted钩子处理：

<template>
  <v-lazy-image ref="lazyImage" :src="src" v-on="$listeners" />
</template>
<script>
import VLazyImage from 'v-lazy-image'
export default {
  props: {
    src: String
  },
  components: {
    VLazyImage
  },
  mounted() {
    const img = new Image()
    img.src = this.src
    // 如果图片已经加载完成，手动触发load事件
    if (img.complete) {
      this.$refs.lazyImage.$emit('load')
    }
  }
}
</script>

5. 更新插件版本 #

如果以上方法都不行，试试更新v-lazy-image到最新版本，可能旧版本存在本地资源的兼容问题：

npm update v-lazy-image

总结 #

最可能的问题是封装组件没透传事件，或者静态资源路径没被webpack正确处理。先去掉封装验证原始插件，再逐步排查修复。

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