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


相关推荐

  • Sublime Text3 编译运行java程序

    Sublime Text3 编译运行java程序SublimeText3编译运行java程序一、必须的准备工作1.计算机上成功安装好javaJDK,并且设置好环境变量。2.计算机上安装的有SublimeTtext3。二、配置SublimeTtext31.找到SublimeTtext3的安装目录下的“Packages”文件夹2.在“Packages”文件夹中找到Java.sublime-packag…

    2022年7月27日
    13
  • 如何得到屏幕分辨率?

    如何得到屏幕分辨率?

    2021年7月29日
    53
  • 数据挖掘——关联规则挖掘

    数据挖掘——关联规则挖掘《数据挖掘》国防科技大学《数据挖掘》青岛大学数据挖掘之关联规则挖掘关联规则挖掘(AssociationRuleMining)最早是由Agrawal等人提出。最初的动机是解决购物篮分析(BasketAnalysis)问题,目的是发现交易数据库(TransactionDatabase)中不同商品之间的联系规则。定义关联规则是描述在一个交易中物品之间同时出现的规律的知识模式,更确切的说,关联规则是通过量化的数字描述物品X的出现对物品Y的出现有多大的影响。关联分析associationana

    2022年7月17日
    15
  • redis可视化客户端工具TreeNMS

    redis可视化客户端工具TreeNMS

    2021年11月3日
    53
  • mysql 提升tps_MYSQL的TPS优化

    mysql 提升tps_MYSQL的TPS优化1、摘要系统初期使用的是分布式微服务,但是所有业务模型都在同一个数据库实例上,数据库的压力会非常大,这时需要找出系统执行频率比较高的SQL,进行优化。这里重点描述定位问题的方法,使用的数据也都是测试环境数据。2、统计数据2.1、统计SQL执行次数showGLOBALstatuslike’Com_insert%’;showGLOBALstatuslike’Com_select%’…

    2022年10月20日
    1
  • linux抓包及分析[通俗易懂]

    linux抓包及分析[通俗易懂]不指定任何参数1tcpdump监听特定网卡1tcpdump-ieth0监听特定主机,例子:10.0.32.28,备注:出入的包都会被监听1tcpdumphost10.0.32.28特定来源、目标地址的通信1tcpdumpsrchosthostname#源主机IP2tcpdumpdsthosthostname…

    2022年10月14日
    0

发表回复

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

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