开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过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 可选链 功能 ?. 替代 res && res.status 可以变成 res?.status

    安装 cnpm install --save-dev @babel/plugin-proposal-optional-chaining .babelrc { "presets": ...

  2. IIS 修改配置 进行性能优化

    1.修改线程池队列长度和启动模式 2.修改线程池最大工作进程数  --设置为0 目的是根据服务器核数 匹配最佳线程数 3.站点高级设置开启预加载

  3. Linux 常见缩写命令英文全称

    linux 命令参考Linux 命令大全: https://man.linuxde.net/ awk = "Aho Weiberger and Kernighan" 三个作者的姓的 ...

  4. String.equals(Object anObject)方法

    首先注意,equals()方法接受的是Object类型的对象,并不一定是String类型. public boolean equals(Object anObject) { //两个对象地址是否一样, ...

  5. 记录--通过手写，分析async await核心原理

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 async await 语法是 ES7出现的,是基于ES6的 promise和generator实现的 generator函数 在之 ...

  6. gRPC入门学习之旅（三）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) 2.3.创建自定义服务 除上面的模板中自带的一个gRPC服务之后,我们再创建一个自己的服务,我将创建一个用户信息gRPC服务,主要功能有三个,登 ...

  7. 替换Spring容器中已经存在的Bean

    一.背景 我们在开发的过程中,经常会引入别人写的jar包实现某些功能.而别人的jar包一般都自动注入Spring容器中,假设别人都是通过@Bean或@Component注入的,并且没有加入@Condi ...

  8. C# Winform 图片 Base64 转换

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  9. verilog注释及vscode插件terosHDL

    模型功能 实现代码的注释的方法 基于vscode的文档自动生成 模型框图 `timescale 1ns / 1ps /* */ // ********************************* ...

  10. VIVADO原理图中的概念

    VIVADO原理图的基本作用 * 查看不同层次下的逻辑关系或者网表关系 * 检查逻辑设计是否可以通过数字电路实现 * 观察重要的信号的走向,分析可能的优化方向 VIVADO原理图几个基本概念 (1) ...