vue-lazyload设置错误图片的宽高
时间: 2024-05-19 22:14:13 浏览: 218
vue-lazyload-一个Vue.js插件,用于在应用程序中延迟加载图像或组件。-Vue.js开发
可以在`lazyload`的配置中添加`error`属性来指定错误图片的路径,同时可以在`img`标签上设置`width`和`height`属性来指定错误图片的宽高,例如:
```
<template>
<img v-lazy="item.src" @error="handleError" :width="item.width" :height="item.height">
</template>
<script>
import { VueLazyload } from 'vue-lazyload'
export default {
data() {
return {
item: {
src: 'http://example.com/image.png',
width: 100,
height: 100
}
}
},
methods: {
handleError(event) {
event.target.src = '/error.png'
}
},
directives: { 'lazy': VueLazyload }
}
</script>
```
在上面的代码中,当图片加载失败时,会触发`handleError`方法来替换图片路径为`/error.png`,同时会根据`item.width`和`item.height`属性来设置错误图片的宽高。
阅读全文