vue中img标签图片 加载时 与 加载失败 的处理方法
开发过程中经常需要和图片处理打交道,看了网上很多有关图片处理的方法,都是讲解得一知半解,没有比较全面的总结。下面,将简单总结一个我们通过vue去处理img标签过程中,图片加载时,与图片加载失败时的处理方法。
1.常见的一个图片的处理流程,当接收到图片时,若图片较大,或者网络较慢的情况,图片还未加载完成,此时需要显示一个正在加载中的图片提示用户图片正在加载中。当图片加载或读取完毕时我们才替换需要显示图片显示到标签上。主要用的是img标签中的onload方法进行处理,代码如下:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<div id="box">
<img :src="loadImgSrc" :onload="onLoadImg(testImgSrc)">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#box',
data: {
testImgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-193cbb243dc14d3a016caaa54ba02837_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625726941&t=178316371a5e946d6b424ceb789595d6", //最终要加载的图片
loadImgSrc: "/themes/default/demo/public/assets/images/loadinggif.gif", //加载中要显示的图片
},
methods: {
onLoadImg: function(imgSrc) { //加载完成时触发
console.log("onload", imgSrc)
return 'this.src='+'"'+imgSrc+'";this.οnlοad=null';
},
}
}); </script> </html>
到此,我们完成了一个图片加载过程中,到加载完成时的一个处理流程。在图片未完全加载成功时显示loading提示图,当图片完全从服务器端down完成后替换显示。
2.上面我们处理了图片正常加载中的处理过程,接下来就是处理图片的异常情况。当我们从服务器中读取一张图片的时候,除了上述的情况外,还有另外一种就是图片链接丢失,或者本地网络过慢无法加载图片的情况。所以我们要在处理的情况中捕捉异常的情况,显示错误状态下的图片,提示用户图片加载失败。这里我们用到的是onerrror的方法,代码如下:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<div id="box">
<img :src="loadImgSrc" :onload="onLoadImg(testImgSrc)" :onerror="onErrorImg(errorImgSrc)">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#box',
data: {
errorImgSrc: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1917562744,2542638399&fm=26&gp=0.jpg", //图片加载失败时的图片
testImgSrc: "https://gimg2.baidu.com/image_search/", //要加载的图片,此处链接随便填用作演示图片加载失败的情况
loadImgSrc: "/themes/default/demo/public/assets/images/loadinggif.gif", //加载中要显示的图片
},
methods: {
onLoadImg: function(imgSrc) {
console.log("onload", imgSrc)
return 'this.src='+'"'+imgSrc+'";this.οnlοad=null';
},
onErrorImg: function(imgSrc){
console.log("onload", imgSrc)
return 'this.οnerrοr=null;this.src='+'"'+imgSrc+'";';
},
}
}); </script> </html>
到此,图片常见的加载中,加载失败时的处理方法就基本实现了,希望对你有所帮助,
vue中img标签图片 加载时 与 加载失败 的处理方法的更多相关文章
- 百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法
百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- 【vue】vue中实现标签页
前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...
- vue中input输入第一个字符时,光标会消失,需要再次点击才能输入
vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...
- Vue中,给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- vue中使用iview表单验证时this指针问题
需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...
随机推荐
- 面试官问我会ES么,我说不会,抓紧学起【ES(一)聚合分析篇】
ES聚合分析 1.metric(指标)聚合 1.1 单值分析 min 求指定字段的最小值 # 求价格的最小值 { "size":0, "aggs":{ &quo ...
- ImageClipboard js粘贴剪切板图片,已测试,可用,可获得base64
ImageClipboard js粘贴剪切板图片,已测试,可用,可获得base64 具体用到自己项目的时候,拿源码改成自己的库,从写一遍 3个小问题 onpaste 执行了两遍,一次是图片加载完成,一 ...
- 流数据库-RisingWave
参考: https://docs.risingwave.com/docs/current/architecture/ https://www.risingwavetutorial.com/docs/i ...
- manjaro安装微信deepin-wine-wechat后启动不了
直接将主目录下载的 .deepinwine 删除! 随后,点击图标,重新安装!
- C++红黑树的实现
最近闲来无事,一直没有研究过红黑树,B树,B+树之类的,打算自己用C语言实现一下它们. 红黑树的性质定义: 节点只能是黑色或者红色. 根节点必须是黑色. 每个叶子节点是黑色节点(称之为NIL节点,又被 ...
- 关于linux系统版本的一个分类展现
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文发布于 2014-07-06 22:58:35 ...
- python高级技术(进程一)
一 什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实 ...
- 记录--vue3中的ref,toRef,toRefs
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个 ...
- RowHammer 攻击:内存的隐形威胁
今天看了一篇 IT 之家关于 AMD 处理器受 RowHammer 内存攻击影响的报道,心血来潮了解了一下 RowHammer 攻击的原理,把了解到的知识记录下来. RowHammer 攻击是一种相对 ...
- 内核模块的makefile规则详解
内核中的Makefile 这里主要对内核源码各子集目录中的Kbulid(内核的编译系统)Makfile进行简单介绍 这部分式内核驱动或设备驱动开发这最长接触到的 Makefile 的语法包括几个方面 ...