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>

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 8个免费查找文献的学术网站

    今天为大家推荐8个免费查找文献的学术网站,希望能帮到大家。文章来源公众号智慧科研。 1.LibraryGenesis LibraryGenesis号称是帮助全人类知识无版权传播的计划。网站上论文很多,下载方便,几乎每天都在更新。网址:http://gen.lib.rus.ec 2.BookSC BookSC网站截止到今天,已有256万+书籍以…

    2022年4月5日
    124
  • 北方地区上传报错,incorrect zone, please use up-z1.qiniu.com

    北方地区上传报错,incorrect zone, please use up-z1.qiniu.com

    2022年2月18日
    48
  • Postman教程大全「建议收藏」

    Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件Postman背景介绍用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网页基本信息,它还可以发送几乎所有类型的HTTP请求!Postman在发送网络HTTP请求方面可以说是Chrome插件类产品中的代表产品之一。Postman的操

    2022年4月6日
    47
  • setScale,preScale 和 postScale 的区别

    setScale,preScale 和 postScale 的区别setScale,preScale和postScale的区别上面讲到,Matrix由3*3矩阵中9个值来决定。而我们对Matrix的所有设置,也是对这9个值的各种不同的改变,来达到我们想要的效果。下面是Matrix3*3的矩阵结构{MSCALE_X,MSKEW_X,MTRANS_X,MSKEW_Y,MSCALE_Y,MTRANS_Y,MPERSP_0,MPERSP_1,MPERSP_2}一、首先介绍Scale缩放的控制scale就是缩放,我们调用Matrix的setScale、preSc

    2022年10月20日
    4
  • Linux中添加路由_linux添加临时路由命令

    Linux中添加路由_linux添加临时路由命令一:使用route命令添加使用route命令添加的路由,机器重启或者网卡重启后路由就失效了,方法://添加到主机的路由#routeadd–host192.168.1.11deveth0#routeadd–host192.168.1.12gw192.168.1.1//添加到网络的路由#routeadd–net192.168.1.11netmask255.255.255.0eth0#routeadd–net192.168.1.11netm

    2022年10月5日
    2
  • wsl2 固定ip_wsl2 ssh

    wsl2 固定ip_wsl2 ssh给win10下的wsl2设置固定ip地址

    2022年8月31日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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