Vue图片加载错误、图片加载失败的处理

Vue图片加载错误、图片加载失败的处理比如后台返回的一个图片字段pic,我们通常在代码里,会做一个检验图片,通常会像下面这样写<img:src=”pic?pic:’../../assets/img/load.png'”alt=””>这个判断只能判断pic是否存在,只有pic=”的情况下,才回显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的图片呢?这个时候就要…

大家好,又见面了,我是你们的朋友全栈君。

加载一个图片pic,会在代码里做一个检验图片是否存在,通常会像下面这样写

<img :src="pic?pic:'../assets/img/load.png'" alt="">

这个判断只能判断pic是否存在,只有pic=””的情况下,才会显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的路径呢?这个时候就要用onerror来检测图片加载错误,加载失败

刚开始试了两种方法,都没有成功,

失败方法一:传送门:http://blog.csdn.net/qq_32786873/article/details/53483951

失败方法二:传送门:http://www.zhihu.com/question/27426689

不墨迹直接上方法,(在data里面先定义好失败的图片路径)

注意的几个点,我第一次写的就入坑了

1. onerror前面要用冒号 :

2. 注意看logo定义的格式,符号不要写错了

<!--template-->
<img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt="">

<!--script-->
<script>
export default {
    data() {
        return {
            errorImage: 'this.src="' + require('../assets/error.png') + '"'  ,
        }
    },
}
</script>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137303.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PAT备考经验&相关信息[通俗易懂]

    在9月8号下午的PAT考试中,我幸运的拿到了满分,用时1小时45分钟,排名第五,算是成功迈出了转专业的第一步。按照惯例应该嘚瑟一波,然而身边并没有人考这个,转念一想,不如把考试日志和备考经验教训记录下来,以期看见此文的后来者能少走一些弯路,更加高效的刷题学习(虽然可能并没有人能看到 _(:△」∠)_)。当然,在科班大佬面前我只是个尚未入门的弱鸡,因此这篇经验主要针对有意转行/业余爱好编程/基…

  • vim 退出命令(保存、放弃保存)_linux保存并退出vim

    vim 退出命令(保存、放弃保存)_linux保存并退出vim测试环境VMware12Pro下CentOS7自带vim7.4.1099今天下午第一次接触这个vim文本编辑器,拿到一个陌生的工具,我们想的当然是最短的时间掌握它的基本操作,体会到成就感。如果你跟我一样,那么这篇教程或许对你有所帮助。Linux下一切皆文件,所以需要强大的文本编辑器,而vim就是Linux上一个功能强大且使用广泛的文本编辑器。它可以建立、编辑、现实文件,并且它只有命令没…

  • 雅虎优化和排名技术

    雅虎优化和排名技术关于YAHOO优化和排名技术基础.把页面本身优化好,就能在Yahoo中取得很好的排名,而这些页面优化都是自己可以控制的,所以说Yahoo优化比Google优化更容易,所用时间更短,特别是对于热门关键词,两者的区别更明显。从另一个角度来说,能把Google优化好的人,不一定水平有多高,可能只不过是手头有较多的链接资源可以利用;若服务期过了以后,把指向你的链接一撤,你的排名就会掉下来。而若能把Yaho

  • 逻辑回归原理_逻辑回归分析

    逻辑回归原理_逻辑回归分析逻辑回归原理

  • JAVA 面向对象 类 对象 封装「建议收藏」

    JAVA 面向对象 类 对象 封装「建议收藏」面向对象概念面向对象其实是一种编程思想,通过它可以把生活中复杂的事情变得简单化,从原来的执行者变成了指挥者。面向对象是基于面向过程而言的。面向过程强调的是过程,比如:打开冰箱门2.把大象放进去3.关上冰箱门面向对象强调的是结果,比如:什么样的冰箱?什么样的大象?谁负责把大象装进去?而不是关注那个负责的人怎么把大象装冰箱里.衣服脏了,直接让女盆友去处理,等着穿干净的就可以了。你不关注中间的过程,只要找好对象就可以了~再比如.我们想吃一道菜,无需考虑是怎么传菜,怎么做菜的,只需点菜即

  • css初始[通俗易懂]

    css概念及作用css即层叠样式表的英文缩写作用:1渲染页面2页面布局css语法CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。示例及详解h1{color:red;

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号