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


相关推荐

  • plsql oracle 使用教程

    plsql oracle 使用教程课程一PL/SQL基本查询与排序    本课重点:    1、写SELECT语句进行数据库查询    2、进行数学运算    3、处理空值    4、使用别名ALIASES    5、连接列    6、在SQLPLUS中编辑缓冲,修改SQLSCRIPTS    7、ORDERBY进行排序输出。  8、使用WHERE字段。    一…

    2022年6月3日
  • 国二C语言:VC++2010学习版「建议收藏」

    国二C语言:VC++2010学习版「建议收藏」全国计算机等级考试二级C语言程序设计考试大纲(2019年版)指出:开发环境:MicrosoftVisualC++2010学习版。也就是说,不管你在学习过程中用的是什么样的开发环境…

    2022年4月20日
  • python批量修改文件后缀名_python程序的文件扩展名为

    python批量修改文件后缀名_python程序的文件扩展名为importosdirname=”C:\\Users\\admin\\Desktop\\新建文件夹”#文件所在的目录li=os.listdir(dirname)#将所有图片名放入到lil列表中foriinrange(len(li)):qianzui=os.path.splitext(li[i])[0]#将文件名和扩展名分隔开houzui=os.path.splitext(li[i])[1]print(qianzui)if.

    2022年9月22日
  • java文件处理(3)——实现文件复制和文件移动「建议收藏」

    java文件处理(3)——实现文件复制和文件移动「建议收藏」任务要求:通过二进制流的操作方式把程序调整为可以实现对任何类型文件进行文件复制(而不是调用windows命令行的内部命令copy)。通过二进制流的操作方式把程序调整为可以实现对任何类型文件进行文件移动(而不是调用windows命令行的外部命令move)。1.介绍InputStream和OutputStreamInputStream和OutputStream是抽象类,是所有字节输入流和输…

    2022年6月22日
  • shell for循环、循环变量值付给其他shell脚本

    shell for循环、循环变量值付给其他shell脚本本文主要将在shell中如何编写for循环,并将循环变量作为下个shell脚本的参数。

    2022年7月24日
  • tomcat启动startup.bat一闪而过

    遇到很多次运行startup.bat后,一个窗口一闪而过的问题,但是从来没去纠正怎样修改配置才是正确的,现在从网上查阅的资料整理如下:tomcat在启动时,会读取环境变量的信息,需要一个CATALINA_HOME与JAVA_HOME的信息,CATALINA_HOME即tomcat的主目录,JAVA_HOME即java安装的主目录,jdk的主目录。首先,要在环境变量处,配置JAVA_HOM

    2022年4月9日

发表回复

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

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