处理图片加载中与加载失败的组件

实现思路

1、props支持传入最终要显示的图片、加载中图片、加载失败图
2、data定义两个变量，imgUrl存储当前显示的图片、error代表状态，包括0-加载中、1-加载成功、2-加载失败
3、imgUrl默认赋值loadingImg，没有传入的话就手动调用onload方法，因为src没有值的情况下不会触发load方法
4、触发load方法：创建一个Image实例，将img传入给该实例的src，在onload回调中，将img赋值给imgUrl，更新error状态为加载成功；在onerror回调中，将加载失败图片赋值给imgUrl，更新error状态为加载失败；最终将图片渲染到页面。

代码实现

<template><div class="default-img" v-if="img"><!-- 图片加载失败且没有传入加载失败图片，展示默认图 --><div v-if="error === 2 && !errorImg" class="placeholder-img"></div><!--显示传入的加载中、成功、失败 --><img v-else :src="imgUrl" @load="handleLoad" @error="handleError" :class="`load-img-default ${error === 0 && !loadingImg ? 'transparent': ''}`"></div>
</template><script lang="js">
import { defineComponent } from 'vue';
import DefaultImg from './../assets/nodata_default.png';export default defineComponent({name: 'DefaultImg',props: {img: { // 加载成功type: String,default: ''},errorImg: { // 加载失败type: String,default: DefaultImg},loadingImg: { // 加载中type: String,default: ''}},data() {return {imgUrl: '',error: 0 // 0-加载中 1-加载成功 2-加载失败}},watch: {// 监听图片更新img(newVal, oldVal) {if (!newVal || newVal === oldVal) returnthis.init()}},mounted() {this.init()},methods: {init() {this.error = 0this.imgUrl = this.loadingImgif (!this.imgUrl) {this.handleLoad()}},handleLoad() {const imgDom = new Image()imgDom.src = this.imgimgDom.onload = () => {this.error = 1this.imgUrl = this.img}imgDom.onerror = () => {this.error = 2this.imgUrl = this.errorImg}},handleError() {this.error = 2this.imgUrl = this.errorImg}}
});
</script>
<style scoped lang="scss">
.default-img {.placeholder-img {width: 100%;height: 100%;background: url('@/assets/nodata_default.png') no-repeat center;background-size: 50%;background-color: #f0f0f0;}.load-img-default {width: 100%;height: 100%;&.transparent {opacity: 0;position: absolute;transform: translateX(1000px);}}}
</style>

处理图片加载中与加载失败的组件相关推荐

一个简单的页面加载管理类(包含加载中，加载失败，数据为空，加载成功)
在最近公布的比赛框架中,发现了页面加载管理类,觉得挺有用的,所以做个简单的笔记. 什么是页面加载管理类呢?(大佬可直接跳过翻看实现过程) 如果能有这个问题,那么很好,哈哈哈,你和我一样,刚开始都挺疑惑 ...
打开计算机不显示硬盘一直在加载中,硬盘加载不出来怎么办下面5个步骤帮你解决...
1.检查电脑上的USB接口是否损坏.可以使用两个不同的移动存储介质插在同一个USB接口测试,可能是USB供电不足导致移动硬盘无法正常启动,供电不足的现象有可能一开始就存在.如果一个能识别,一个不能识别 ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
ajax 延迟显示加载中提示
近期做项目时用到了jquery的ajax,我希望实现"加载时提示用户"的功能,于是先习惯性的度娘谷哥了下,发现按照网上朋友所说的做,每次加载都会提示,不符合我的需求.于是我改进了下 ...
layui 加载中_宝骏360促销中，最高直降0.91万，新车全国4.77万起！
说到买车,大家都会有各种纠结.汽车作为日常生活的一种高消品,品牌配置差点的少则几万,中等好点的十几二十几万,高档高配置的几十上百甚至上千万,由于经济能力的不同,大家的选择也不尽相同,那么买车时,该如何 ...
Vue3加载中（Spin）
Vue2加载中(Spin) 可自定义设置以下属性: 是否为加载中状态(spinning),类型:boolean,默认 true 组件大小(size),类型:'small'|'default'|'lar ...
bpl文件java,在LoadLibrary中动态加载BPL失败
我想在Delphi 10 Seattle(Update 1)或Delphi 10.1 Berlin项目(Enterprise版本)中动态加载BPL模块 . 但LoadPackage函数失败并显示消息( ...
dzzoffice,onlyoffice文档加载中下载失败
前言使用dzzoffice搭建的网盘系统结合onlyoffice实现在线文档共享编辑 docker运行的onlyoffice,配置完打开文档一直显示文档加载中,过段时间显示下载失败这份文件无法保存 ...
计算机加载桌面失败,电脑开机以后进不去桌面一直在加载中，什么原因？
大家好我是大明今天就"电脑开机以后进不去桌面一直在加载中,什么原因?"这一问题给大家做一下分享. 根据上述问题的描述和配图后我把这类故障归类于"开机启动类故障" ...

处理图片加载中与加载失败的组件

实现思路

代码实现

处理图片加载中与加载失败的组件相关推荐

最新文章

热门文章