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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm 激活code 2022【最新永久激活】

    (pycharm 激活code 2022)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1…

    2022年3月31日
    582
  • 一些有意思的 GitHub 项目

    一些有意思的 GitHub 项目GitFiti常用GitHub的同学应该知道GitHub的提交日历,每日提交的次数越多,颜色越深,于是有人写了此项目,可以自动根据配置提交不同次数的日志,这样即可画出指定的图案。看来程序员的脑洞也非常大啊!GitHub地址:https://github.com/gelstudios/gitfitiNoCode正如标题所示,“NoCode”,其作者是来…

    2022年7月16日
    14
  • tomcat是否有必要配置环境变量[通俗易懂]

    tomcat是否有必要配置环境变量[通俗易懂]答案:否好多环境都需要配置环境变量,有时候都搞不清楚哪些需要哪些不需要,今天特地查了一下tomcat是否需要配置环境变量。又涨知识了,原来可以配置也可以不配置。既然能不配置,本着懒懒的毛病,当然是不配置了哈哈…但这里还是说明一下为啥不需要配置吧!1、Tomcat解压完成后,直接在bin目录下运行startup.bat,是可以启动Tomcat的!2、但是如果不是在bin目录下运行star…

    2022年5月7日
    55
  • baq在聊天中啥意思_baq(网络用语baq啥意思)

    脑龄商数(brain-agequotient)更多释义>>[网络短语]baq块自适应量化,分块自适应量化(blockadaptivequantization),巴兰基亚baqbarranquilla巴兰基亚baq.BAQabbr.脑龄商数(brain-agequotient)应当是bag把,书包的意思BAQ,谁知道beijingassociationof…

    2022年4月4日
    622
  • 腾讯云服务器配置ssl,腾讯云服务器SSL证书申请及配置[通俗易懂]

    腾讯云服务器配置ssl,腾讯云服务器SSL证书申请及配置[通俗易懂]最近在研究微信小程序,服务端需要部署在一台服务器上,查看了一下,腾讯云在搞活动,就申请了腾讯云的服务器,但是微信小程序访问需要用https协议才能请求,于是研究了一下如何申请及配置ssl证书。本人穷逼一枚,一向以节俭,所以申请了一个免费证书。申请步骤如下:1、登录证书申请页面https://console.qcloud.com/ssl/apply2、输入必要信息,通用名称及申请邮箱,点击下一步这一…

    2022年9月4日
    4
  • 比太钱包使用方法及冷钱包存储方案-2

    拖更一个月的我又开始更新了。过完年,恰逢数字货币开始上涨,正好是聊聊钱包的好时候。上文说到比太钱包的冷热模式,这次接上文写冷钱包模式下的发币及公钥监控操作。先从冷钱包模式下发币说起吧:1,打开钱包,点击发送按钮。2,输入收款地址和金额,并点击发送。这里无论是输入比特币金额还是法币金额,钱包会自动换算出另一种货币金额。3,输入钱包密码,准备冷钱包签名。4,生成未签名的交易信息二维码,需使用装有对应…

    2022年4月5日
    152

发表回复

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

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