vue3中 vue-lazyload 如何设置加载中图片宽高

在Vue3中，vue-lazyload的宽高设置与Vue2类似，可以通过在配置中添加loading选项来设置加载中图片的宽高。

示例代码：

import VueLazyload from 'vue-lazyload'

app.use(VueLazyload, {
  loading: require('./assets/loading.gif'),
  observer: true,
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
})

在上面的示例中，loading选项指定了加载中图片的路径，可以使用require()方法导入图片，也可以直接指定图片的URL。同时，loading选项也可以设置图片的宽高，例如：

loading: {
  src: require('./assets/loading.gif'),
  width: '100px',
  height: '100px'
}

上面的代码中，loading选项的值是一个对象，其中包含了图片的路径和宽高。通过设置width和height属性，可以指定图片的宽高。

相关问题

vue3中 vue-lazyload 如何设置错误图片宽高

在Vue3中使用vue-lazyload设置错误图片的宽高可以通过以下步骤实现：

1. 在组件中引入vue-lazyload：

import VueLazyload from 'vue3-lazyload'

2. 在组件中注册vue-lazyload：

app.use(VueLazyload, {
  error: './error.png', // 错误图片路径
  loading: './loading.gif', // 加载中图片路径
  observer: true, // 开启懒加载
})

3. 在组件中使用vue-lazyload：

<img v-lazy="'./image.png'" :style="{ width: '100px', height: '100px' }" />

4. 在组件中设置错误图片的宽高：

<img
  v-lazy="'./image.png'"
  :style="{ width: '100px', height: '100px' }"
  @error="$event.target.style.width = '50px'; $event.target.style.height = '50px'"
/>

在上述代码中，通过在img标签中添加@error事件，当加载图片失败时，会触发该事件，然后在事件处理函数中设置图片的宽高为50px。可以根据实际需求设置不同的宽高。

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事件来替代。