zoukankan      html  css  js  c++  java
  • 判断图片是否存在,不存在则显示默认图片

    记录每一个小坑、大坑

    利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的 URL

    • html 代码
    <img 
        src="./img/No_Pics.jpg" 
        onerror="javascript:this.src='./img/No_Pics.jpg'" 
        alt=""  
        id="img">
    
    • js 赋值
    var truepic = `./Pic/${getdata.USER_NAME}.jpg`
    $("#img").attr("src", truepic)
    

    • 直接应用函数($color{red}{引用菜鸟教程例子}$)
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <img src="image.gif" onerror="myFunction()">
    <p>如果在加载图片时发生错误则触发函数 myFunction() 函数会弹出提示窗口。</p>
    该实例中我们引用的图片不存在,因此会触发 onerror 事件。
    <script>
    function myFunction() {
        alert('无法加载图片。');
    }
    </script>
    
    </body>
    </html>
    
    • 适用所有主流浏览器,包括 IE

    • 衍生问题
      img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404
    • 解决方法
    <img 
      src="image.gif"  
      onerror="javascript:this.src='src/images/default.jpg';this.onerror = null">
    

    有图片
    无图片

    简单的onerror事件,说实话到现在才知道,用起来挺方便的,记笔记记笔记~

    点个赞呗!

  • 相关阅读:
    js插件-图片椭圆轮播效果
    js-放大镜效果
    vue使用技巧,及遇到的问题
    vue的传参方式和router使用技巧
    关于new Date()的日期格式处理
    图片上传预览
    缓动动画的原理
    input不能输入汉字和负数
    上传格式判断方法
    Vue-cli3.0配置全局less
  • 原文地址:https://www.cnblogs.com/jry199506/p/11040175.html
Copyright © 2011-2022 走看看