vuetify的v-img组件支持lazy-src属性来设置懒加载的图片,但是懒加载的图片会有一个轻微的模糊滤镜
给图片添加加载动画
想给图片做一个加载动画,图片未加载完成时展示这个动画图片,看了文档后直接用了lazy-src来设置。
但是这样子展示的加载动画总是模模糊糊的,差不多是个毛玻璃效果。
我这个又不是缩略图,而是一个完整大小的加载动画gif图片,加这样的滤镜就是多此一举,而且体验极差。
vuetify文档里面是这么说的
在等待主映像加载时显示的内容,通常是一个小型的base64编码的缩略图。有一个轻微的模糊滤镜应用。
使用 vuetify-loader 来自动生成
我找了很多文档,百度谷歌搜索了一圈,也没找到移除这个模糊效果的办法。
另辟蹊径
既然此路不通,就只能换一个办法,其实给图片加加载动画用lazy-src并不是非常正确的做法,加载动画应该用插槽的方式来实现,只需要加一个插槽里面放上加载动画图片就能完美实现我要的效果
<v-img transition="scale-transition" src="https://cdn.luoxx.top/book/cover/2022/5/1/14/1651387267380.jpg" >
<template v-slot:placeholder>
<v-img src="https://cdn.luoxx.top/halo/loading-1653488317329.gif"></v-img>
</template>
</v-img>
这样子实现的加载动画图片就是高清无码的了。
评论区