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


相关推荐

  • docker部署redis哨兵集群_redis部署安装

    docker部署redis哨兵集群_redis部署安装Docker安装Docker部署redis在dockerhub上可以看到有redis的官方镜像不去网站,也可以通过如下命令查看有那些镜像可用Dockersearch命令dockersearchredis拉取redis镜像Dockerpull命令这里我们拉取官方的最新版本的镜像:dockerpullredis:latest查看本地镜像Dockerimages命令有redis和hello-world运行容器Dockerrun命令d

    2022年10月18日
    4
  • 一看你就懂,超详细java中的ClassLoader详解

    一看你就懂,超详细java中的ClassLoader详解本篇文章已授权微信公众号guolin_blog(郭霖)独家发布ClassLoader翻译过来就是类加载器,普通的java开发者其实用到的不多,但对于某些框架开发者来说却非常常见。理解ClassLoader的加载机制,也有利于我们编写出更高效的代码。ClassLoader的具体作用就是将class文件加载到jvm虚拟机中去,程序就可以正确运行了。但是,jvm启动的时候,并不会一次性加载所有的…

    2022年4月27日
    45
  • 有线如何通过笔记本无线共享上网_笔记本插网线怎么共享WiFi

    有线如何通过笔记本无线共享上网_笔记本插网线怎么共享WiFi半年前搬到新住的地方,由于条件限制,房间就一根网线,我跟我老婆两人晚上都需要用到电脑,于是萌生了通过路由器来达到多机器同时上网,不过最后失败。当时没想起大学时代经常干的事情(学校寝室上网要账号,账号都要钱的):通过一台电脑上网,所有其他电脑都通过这台机器上网。半年之后的今天,由于工作实在需要网络,这种条件下,让我想起了曾经的这么一回事,因此我在想,既然能通过有线达到共享网络,无线原理应该一样吧…

    2025年6月3日
    3
  • 如何安装 IntelliJ IDEA 最新版本——详细教程「建议收藏」

    如何安装 IntelliJ IDEA 最新版本——详细教程「建议收藏」IntelliJIDEA简称IDEA,被业界公认为最好的Java集成开发工具,尤其在智能代码助手、代码自动提示、代码重构、代码版本管理(Git、SVN、Maven)、单元测试、代码分析等方面有着亮眼的发挥。IDEA产于捷克,开发人员以严谨著称的东欧程序员为主。IDEA分为社区版和付费版两个版本。我呢,一直是Eclipse的忠实粉丝,差不多十年的老用户了。很早就接触到了IDEA…

    2022年10月1日
    4
  • 小程序 轮播图

    小程序 轮播图轮播图:cssswiper{height:400rpx;}swiper-itemimage{width:100%;height:100%;}.swiper-container{position:relative;margin-top:-300rpx;}.swiper-container.swiper{height:300r…

    2022年5月11日
    40
  • Java正则表达式替换所有特殊字符

    Java正则表达式替换所有特殊字符Java正则表达式替换所有特殊字符 /** *正则替换所有特殊字符 *@paramorgStr *@return */ publicstaticStringreplaceSpecStr(StringorgStr){ if(null!=orgStr&&!””.equals(orgStr.trim())){ StringregEx=”[\\

    2022年5月16日
    63

发表回复

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

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