首页vue-lazyload单独设置占位图片宽高

vue-lazyload单独设置占位图片宽高

时间: 2023-12-31 22:03:18 浏览: 172

可以通过在lazyload组件中设置一个placeholder属性来设置占位图片的宽高，如下所示： ``` <template> <div> <img v-lazy="imageSrc" :placeholder="placeholderSrc" /> </div> </template> <script> import placeholderSrc from '@/assets/placeholder.png'; export default { data() { return { imageSrc: 'https://example.com/image.jpg', placeholderSrc, }; } } </script> ``` 在上面的代码中，我们使用了v-lazy指令来让图片懒加载，同时在img标签中设置了一个placeholder属性，该属性的值为占位图片的地址。通过在CSS中为占位图片设置宽高，就可以实现单独设置占位图片宽高的效果。

阅读全文