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)


相关推荐

  • 自写JQ控件-树状菜单控件[demo下载]

    自写JQ控件-树状菜单控件[demo下载]

    2020年11月12日
  • 查看Linux内核版本及发行版本「建议收藏」

    查看Linux内核版本及发行版本「建议收藏」1.查看内核版本$uname-srLinux4.15.11-1.el7.elrepo.x86_64$uname-aLinuxlocalhost.localdomain4.15.11-1.el7.elrepo.x86_64#1SMPMonMar1911:46:06EDT2018x86_64x86_64x86_64GNU/Linux$cat/pro…

    2022年10月13日
  • HTML自我介绍表格代码制作[通俗易懂]

    HTML自我介绍表格代码制作[通俗易懂]<html><head><title>张三</title><matename=”keywords”content=”个人简历”/><matename=”description”content=”张三的个人简历”/></head><body><tableborder=5bordercolor=redalign=center><trheight=70bgcol.

  • 2018年系统架构设计师综合知识真题及详细答案解析

    2018年系统架构设计师综合知识真题及详细答案解析2018年系统架构师考试科目一:综合知识1.在磁盘调度管理中,应先进行移臂调度,再进行旋转调度。假设磁盘移动臂位于21号柱面上,进程的请求序列如下表所示。如果采用最短移臂调度算法,那么系统的响应序列应为()。  A.②⑧③④⑤①⑦⑥⑨  B.②③⑧④⑥⑨①⑤⑦  C.①②③④⑤⑥⑦⑧⑨  D.②⑧③⑤⑦①④⑥⑨【解析】  当进程请求读磁盘时,操作系统先进行…

  • clion激活码(注册激活)

    (clion激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~08G05E7DZH-eyJsaWNlb…

  • 吞食鱼2(FeedingFrenzyTwo) 修改器[通俗易懂]

    吞食鱼2(FeedingFrenzyTwo) 修改器[通俗易懂]童年回忆系列。小时候特别喜欢玩这类游戏,软件不大,很慢的网速也不会下载太久,然后对配置要求不高,很破的电脑也可以玩得很开心。不过也有糟心的时候啊,大鱼太多,无数次死于挑战咬梭子鱼的尾巴……今年最后一天

发表回复

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

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