开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过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. vue 动态加载css，改变网站皮肤模式

    Vue.mixin({ created () { require('view-design/dist/styles/iview.css') } }) 参考资料:https://blog.csdn.ne ...

  2. 安装VMware——Unable to install all modules.See log /tmp/vmware-han/vmware-6098.log for detalls.(Exit code 1)的解决方法（模块加载失败）

    这是编译失败的原因在VM社区有这样一种解决方案,亲测有效,帮助我自己解决的麻烦,所有在这分享,希望能够帮助到小伙伴:不要被接下来的代码吓倒因为这是github上项目,所以要先在ubuntu上安装git ...

  3. Redis 八种常用数据类型详解

    夯实基础,这篇文章带着大家回顾一下 Redis 中的 8 种常用数据类型: 5 种基础数据类型:String(字符串).List(列表).Set(集合).Hash(散列).Zset(有序集合). 3 ...

  4. 【算法】C和Python实现快速排序-三数中值划分选择主元（非随机）

    一.快排基础 1.1 快排的流程 将数组A进行快速排序的基本步骤-quick_sort(A): 递归基础情况:如果A中的元素个数是1或0,则返回. 选取主元:取A中的任意一个元素v,作为主元(pivo ...

  5. day04-原生的API&注解方式

    原生的API&注解方式 1.MyBatis原生的API调用 1.1原生API快速入门 需求:在前面的项目基础上,使用MyBatis原生的API完成,即直接通过SqlSession接口的方法来完 ...

  6. spring boot2集成api文档工具swagger-ui(下)

    接上篇 swaggerUI提供了可视化界面帮助我们管理服务的访问路口,这就需要我们在代码中规范我们的书写格式.并且在swagger的界面上还能够模拟浏览器对服务进行访问. 接口总览 创建POST接口 ...

  7. vue2（脚手架、组件）

    2.1 脚手架 使用前置: 第一步(没有安装过的执行):全局安装 @vue/cli npm install -g @vue/cli 第二步:切换到要创建项目的目录,然后使用命令创建项目 vue cre ...

  8. 第144篇:阿里低开项目 init方法

    好家伙,  demo-general项目运行后主界面如下   解析阿里低开引擎中的初始化方法init 拆解项目来自阿里的lowcode engine目录下的 demo general项目 0.找到入口 ...

  9. BugkuCTF-游戏过关

    首先将exe文件下载下来,打开看一下: 玩游戏 n是灯的序列号,m是灯的状态 如果第n盏灯的m是1,它就开,如果不是,它就关 起初所有的灯都关上了 现在你可以输入n来改变它的状态 但是你应该注意一件事 ...

  10. 基于VS Code的JSDoc的使用指南

    1. 引言 JSDoc是一个用于 JavaScript 的API文档生成器,可以将文档注释直接添加到源代码中,JSDoc 工具将扫描您的源代码并提供一些操作,例如,生成一个 API 文档 JSDoc官 ...