开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过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标签图片 加载时 与 加载失败 的处理方法的更多相关文章

  1. 百度编辑器ueditor 异步加载时，初始化没办法赋值bug解决方法

    百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...

  2. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  3. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  4. vue中input输入第一个字符时，光标会消失，需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

  5. Vue中，给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

  6. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  7. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  8. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  9. vue中，对象数组多层嵌套时，更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  10. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

随机推荐

  1. kubernetes 1.20版本 二进制部署

    kubernetes 1.20版本 二进制部署 目录 kubernetes 1.20版本 二进制部署 1. 前言 2. 环境准备 2.1 机器规划 2.2 软件版本 3. 搭建集群 3.1 机器基本配 ...

  2. 本地锁 & 分布式锁

    引子: 解决缓存击穿问题 synchronized (this){代码块} public synchronized Map<String,List<Catelog2Vo>> g ...

  3. Git进阶命令-revert

    有关Git,之前有写过两篇文章: Git五个常见问题及解决方法 Git进阶命令-reset 一.revert命令使用场景 有一天项目经理跟你说,你开发上线的代码有问题,需要马上撤回. 撤回?你第一反应 ...

  4. 4项关键技术提升 XR 扩展现实体验-XR应用云流化

    无论是使用户能够协作设计电动赛车,还是帮助观众通过数字世界与自然互动,越来越多的企业利用XR扩展现实为用户提供沉浸式逼真的虚拟环境. 下一代沉浸式技术的应用越来越广泛,图形和人工智能的最新突破正在扩展 ...

  5. 基于C#的自动校时器 - 开源研究系列文章

    上次在公司的Windows7电脑上操作系统没有自动进行校时,导致系统时间老是快那么几分钟,于是想到了用C#开发一个系统时间自动校时器.这个应用不难,主要是能够校时那个操作类的问题. 1. 项目目录: ...

  6. StableSwarmUI：功能强大且易于使用的Stable Diffusion WebUI

    StableSwarmUI是一个模块化和可定制的Stable Diffusion WebUI,最近发布了0.6.1-Beta版本.这个开源项目,托管在GitHub上:https://github.co ...

  7. MySQL报语法错误，排查竟然花了一个钟！！！！

    背景:最近协助远程同事开发一个功能,我调用同事写的接口,出现报错,影响和前端联调,同事正在处理其他事情,暂时无暇顾及.遂自行解决.查看日志现发一个inser语句报语法错误. 异常日志: bad SQL ...

  8. Kingbase 函数查询返回结果集

    数据库使用过成中,时常会遇到需要返回一个结果集的情况,如何返回一个结果集,以及如何选择一个合适的方式返回结果集,是现场经常需要考虑的问题. 下面介绍KingbaseES中各种返回结果集的方式. 1.通 ...

  9. python 国家标准行业编码标准格式化处理

    代码在上次的基础上做了一点优化,之前对项目要的最终结果理解有些偏差: 原始数据的那一列行业编码是存在三位数和四位数的,我上次理解的三位数就是分割成两位数进行查找,其实三位数的编码是由于第一位的0没有显 ...

  10. HTTPS&SPDY&HTTP2&QUIC&HTTP3

    HTTPS 密钥交换,加密和解密 SPDY&HTTP2 QUIC&HTTP3