开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过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. Tomcat错误之java.lang.OutOfMemoryError:PermGen space解决方案

    公司的站点是跑在Tomcat环境下的,运行一段时间后,有时会报这样的错误:java.lang.OutOfMemoryError: PermGen space 在网上查询了一下,大部分都说是jvm虚拟机 ...

  2. Android源码在线查看网站

    一.aospxref http://aospxref.com/ 优点:更新速度快 缺点:历史版本较少 二.androidxref http://androidxref.com/ 优点:历史版本较多 缺 ...

  3. 记录--谁还没个靠bug才能正常运行的程序

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 最近遇到一个问题,计算滚动距离,滚动比例达到某界定值时,显示mask,很常见吧^ _ ^ 这里讲的不是这个需求的实现,是其中遇到了一个比较 ...

  4. k8s-master 设置调度污点

    k8s master 调度污点 NoSchedule:K8Snode添加这个effecf类型污点,新的不能容忍的pod不能再调度过来,但是老的运行在node上不受影响 NoExecute:K8Snod ...

  5. axios中设置了response:blol后，如何处理json对象

    axios中文件下载 上传文件后台校验,若失败则下载文件 let loading = this.$common.loading("正在上传"); let form = new Fo ...

  6. 立创EDA的使用

    立创EDA的使用 1.实验原理 最近在使用立创EDA来做电路作业,这里记录一下立创EDA的基本操作,以后小型的电路设计可以在其主页完成.立创EDA是一个可以线上完成电路设计仿真以及布线的免费设计工具, ...

  7. 基于SCCB协议的FPGA实现

    SCCB协议 1.协议内容 SCCB协议常用于vo系列的摄像头的寄存器配置中,是有IIC协议演变而来.本来,本人接触这个协议也是想配置摄像头用于摄像模块.但是,由于配置寄存器实在是太多,而且需要找的资 ...

  8. OWOD：开放世界目标检测，更贴近现实的检测场景 | CVPR 2021 Oral

    不同于以往在固定数据集上测试性能,论文提出了一个更符合实际的全新检测场景Open World Object Detection,需要同时识别出未知类别和已知类别,并不断地进行增量学习.论文还给出了OR ...

  9. 关于Actor Component的思考--学习斯坦佛UE+C++

    跟着B站的视频学习,感觉自己的头很混乱.所以浅浅总结一下创建Actor Component之后其的作用和相关操作. Actor Component 首先Component为一个组件,源码就是一个类的声 ...

  10. Java字符串比较 == 和 equals方法的区别

    今天在排除一个bug的时候出现了一个很低级但是也很容易被忽视的错误,在此写了一个小例子做记录. 首先我先说一下错误的场景,我读取了一段json数据,并使用JSONObject的实例对象的getStri ...