vue vant Image组件图片加载时与加载失败的处理方法

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示

鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用

vant官网地址 Vant 3 - Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/

最近使用了vant的Image组件做了自定义图片加载时与加载失败后的处理，测试人员测试后发现，如果没有图片也在一直转菊花，并没有显示失败图片，代码如下：

<van-image fit="cotain" :src="item.imgUrl">//加载中使用自定义loading <template v-slot:loading><van-loading type="spinner" size="20" /></template>//加载失败使用的自定义图片<template v-slot:error><van-image fit="scale-down" :src="logoPlaceholder" /></template>
</van-image><script>import logoPlaceholder from '@/assets/img/icon/product-default-sm.svg'
</script>

附上异常效果图

一直转菊花为显示失败占位图片

解决办法

对需要显示的图片做一个判断，如有图片则会展示，否则展示自定义失败图片

item.imgUrl ? item.imgUrl : ' '

//item.imgUrl ? item.imgUrl : '' 加上一个三元判断
<van-image fit="cotain" :src="item.imgUrl ? item.imgUrl : ''">//加载中使用自定义loading <template v-slot:loading><van-loading type="spinner" size="20" /></template>//加载失败使用的自定义图片<template v-slot:error><van-image fit="scale-down" :src="logoPlaceholder" /></template>
</van-image><script>import logoPlaceholder from '@/assets/img/icon/product-default-sm.svg'
</script>

附上解决效果图

展示自定义失败占位图

到此结束

vue vant Image组件图片加载时与加载失败的处理方法相关推荐

穿越火线登录上去一直连接服务器,Windows7登录CF时提示连接服务器失败的解决方法...
想必大家都知道CF,这是目前较火的网络游戏.可是有不少玩家在登录CF的时候,连接不到服务器,这让玩家抓狂,下面U大侠小编就给大家介绍下Windows7登录CF时提示连接服务器失败的解决方法. CF 官 ...
html自动切换图片怎么白屏,CSS 如何影响首次加载时的白屏时间的解决方法
含有外部 css 文件的渲染流水线上图中,请求 HTML 数据和构建 DOM 中间有一段空闲时间,这段时间可能成为页面渲染的瓶颈.DOM 构建结束后,css 文件还未下载完成这段时间内,渲染流水线一 ...
vue vant Area组件使用详解
文章目录 1. 下载areaList.js 2. 组件注册 3. 封装组件 4. 使用组件 5. 效果图 6. 项目源码 1. 下载areaList.js 见文章末尾 2. 组件注册 main.js引 ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
vue基于el-timeline组件实现动态表格时间线
前言 element中表格和时间线组件相信不少同学都用过吧,现在有这么一个需求,利用时间线组件实现不同时间线下的表格数据展示,同时表格表头及表格内的数据也是动态渲染的,效果如下图. 实现效果: 实现思 ...
关于element upload组件图片上传时闪烁/空了一格问题
打开控制台发现添加的时候,他在<ul>里边加载出了两个<li>,过一会儿第一个<li>就消失,初步怀疑就是这个is-ready闹的鬼解决方法: //在样式把这个i ...
ant design vue 清空upload组件图片缓存的方法
当关闭这个窗口后,再次打开,上传上传的图片清空在upload 这个组件外加一个key 赋随机值,便可清除缓存缓存代码如下: <a-modal v-model="visible&qu ...
vue vant Calendar组件日历开始时间结束时间的范围控制时间戳标准时间转换获得月份的最后一天
功能: 开始时间范围选择: 最小时间:去年的今天最大时间:当前时间结束时间范围选择: 最小时间:开始时间最大时间: 开始时间月份的最后一天比如:当前时间2021-07-24,开始时间选择范围就 ...
Ant Design Vue - 去除 input 组件边框和获取焦点时的边框蓝阴影效果
前言默认情况下,组件是有默认边框与获取焦点时存在的阴影效果的. 解决方案在该页面的底部加入以下覆盖样式. .ant-input:focus {/* 去除获取焦点时的样式 */border: non ...

vue vant Image组件图片加载时与加载失败的处理方法

附上异常效果图

解决办法

附上解决效果图

到此结束

vue vant Image组件图片加载时与加载失败的处理方法相关推荐

最新文章

热门文章

vue vant Image组件 图片加载时 与 加载失败 的处理方法

附上异常效果图

解决办法

附上解决效果图

到此结束

vue vant Image组件 图片加载时 与 加载失败 的处理方法相关推荐

最新文章

热门文章

vue vant Image组件图片加载时与加载失败的处理方法

vue vant Image组件图片加载时与加载失败的处理方法相关推荐