vue3中 vue-lazyload 如何设置加载中图片宽高
时间: 2024-05-05 18:17:28 浏览: 257
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
在Vue3中,vue-lazyload的宽高设置与Vue2类似,可以通过在配置中添加loading选项来设置加载中图片的宽高。
示例代码:
```javascript
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选项也可以设置图片的宽高,例如:
```javascript
loading: {
src: require('./assets/loading.gif'),
width: '100px',
height: '100px'
}
```
上面的代码中,loading选项的值是一个对象,其中包含了图片的路径和宽高。通过设置width和height属性,可以指定图片的宽高。
阅读全文