vue3中 vue-lazyload @loading不生效

如果在 Vue 3 中使用 vue-lazyload，但是 @loading 属性不起作用，可能是由于以下原因：

1. Vue 3 中的模板语法发生了变化，需要使用 v-bind 指令来绑定属性，而不是使用 @ 符号。因此，应该使用 v-bind:loading 或 :loading 来绑定 @loading 属性。

2. 如果你使用的是 Vue 3.0.0-beta.6 或更高版本，那么 vue-lazyload 可能不再兼容。你可以尝试升级到最新版本，或者使用其他 lazyload 库。

3. 检查一下你的图片是否正确加载。如果图片已经加载，那么 @loading 属性当然不会起作用。你可以尝试使用一张比较大的图片来测试。

4. 确认一下你的组件是否正确引入了 vue-lazyload。你可以在浏览器控制台中查看是否有报错信息。

如果以上方法都无法解决问题，你可以尝试提供更多的代码和错误信息，以便我们更好地了解问题所在。

相关问题

vue3中 vue-lazyload @loading修改宽高

在vue3中使用vue-lazyload插件时，可以通过修改@loading属性来设置图片加载时的占位符的宽高。

具体步骤如下：

1. 安装vue-lazyload插件

npm install vue-lazyload --save

2. 在Vue组件中引入vue-lazyload插件

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

3. 在需要使用懒加载的图片上加上v-lazy指令，并设置@loading属性

<img v-lazy="imageSrc" @loading="onLoading" />

4. 在Vue组件中定义onLoading方法，并在该方法中设置占位符的宽高

methods: {
  onLoading (el) {
    el.style.width = '100px'
    el.style.height = '100px'
  }
}

在上面的代码中，onLoading方法会在图片加载时被调用，el参数是图片的占位符元素。通过设置el的style属性，可以修改占位符的宽高。在例子中，将占位符的宽高设置为100px。

注意：在Vue3中，由于事件修饰符@load和@error已经被移除，因此无法使用这些修饰符来处理图片加载成功或失败的情况。如果需要处理这些情况，可以使用onload和onerror事件来替代。

vue3中 vue-lazyload的@loaded不生效

可能是因为Vue3的生命周期钩子与Vue2有所不同，需要在Vue3中使用新的生命周期函数。具体来说，需要使用 `onMounted` 替代 `mounted`，使用 `onUpdated` 替代 `updated`，使用 `onUnmounted` 替代 `destroyed`。

在使用 `vue-lazyload` 时，需要在 `onMounted` 中注册 `Vue.directive('lazy', VueLazyload)`，然后才能使用 `v-lazy` 指令。同时，在 `onUpdated` 中调用 `Vue.prototype.$Lazyload.update()` 来更新图片懒加载。

示例代码：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

export default {
  name: 'App',
  onMounted() {
    Vue.directive('lazy', VueLazyload)
  },
  onUpdated() {
    Vue.prototype.$Lazyload.update()
  }
}