侧边栏壁纸
博主头像
luoxx博主等级

只要思想不滑坡,办法总比困难多

  • 累计撰写 53 篇文章
  • 累计创建 58 个标签
  • 累计收到 987 条评论

目 录CONTENT

文章目录

vuetify 图片懒加载 移除模糊效果

luoxx
2022-05-26 / 0 评论 / 0 点赞 / 1,619 阅读 / 435 字
温馨提示:
本文最后更新于 2022-05-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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>

这样子实现的加载动画图片就是高清无码的了。

0

评论区