开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过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. Java面试必考题之线程的生命周期，结合源码，透彻讲解!

    写在开头 在前面的几篇博客里,我们学习了Java的多线程,包括线程的作用.创建方式.重要性等,那么今天我们就要正式踏入线程,去学习更加深层次的知识点了. 第一个需要学的就是线程的生命周期,也可以将之理 ...

  2. snipaste 替换 微信截图快捷键 F3贴图功能实在是太帅了 - 软件推荐

    snipaste 替换 微信截图快捷键 这个软件很久之前就知道,一直也没觉得可以替换微信的截图功能,毕竟能懒就懒. 今天同事又推荐 用了下,觉得确实ok. https://zh.snipaste.co ...

  3. SecureCRT windows 登录 linux

    SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件.SecureCRT支持SSH,同时支持Telnet和rlog ...

  4. java的接口和抽象类区别

    转自:深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在 ...

  5. [Leetcode 1981. 最小化目标值与所选元素的差] 记忆化搜索

    记忆化搜索 class Solution { int ans = 5001; public int minimizeTheDifference(int[][] mat, int target) { i ...

  6. String内存模型和Java常用方法

    一.String内存模型 1.直接赋值创建string对象内存原理: StringTable(串池):字符串常量池,用来存储字符串,只能是在直接赋值中使用才会存在串池当中(JDK7前串池是在方法区里面 ...

  7. DNS劫持怎么预防？

    DNS劫持,也称为域名劫持,是一种网络攻击手段,攻击者通过拦截域名解析的请求,将用户重定向到恶意站点,以达到获取用户信息或谋取非法利益的目的.DNS劫持可以分为以下几种基本类型: 1.路由器DNS劫持 ...

  8. python 图片转文字小工具

    应群友要求,要做一个图片转文字的格式,因为有些人的简历中只有一张图片要提取他里面的文字就不好办了. 于是就有了下面这个小工具: 功能:选择要识别的图片后,识别出来后存到.txt文本中. 实现原理,基于 ...

  9. vue2中安装vuex

    2022年2月7日,vue3成为默认版本,npm i vue安装的直接就是vue3了 npm i -vuex 安装的是vuex4 vuex4只能在vue3中使用 vue2中,要用vuex3版本,安装 ...

  10. QT之串口通信和多线程处理

    前言 使用QT的多线程编程,完成串口通信助手的设计. 实施 Qt5下的串口编程 使用QT5.12中自带的QSerialPort和QSerialPortInf的类实现对串口硬件的访问,通过对类的方法进行 ...