超实用，解决img标签src绑定了正确地址后，图片有时候不显示问题 - slience123的个人空间 - 开源中国

安宇雨 - 随手采集
2018-10-13 16:24:17
随手采集
0000-未整理-等待研究

今天做项目的时候，遇到一个比较奇葩的问题，将后台返回的图片地址链接绑在img标签的scr上的时候，有时候会偶发的不显示，但是将后台返回的地址复制到浏览器，又能直接打开，我跑过去问后端，他说他知道这个问题，也说了半天，反正意思就是，这个问题以前就存在，确实后台存在问题，但是因为某些原因，他解决不了，看看我们前端能不能曲线救国，我晕，那没办法了，测试已经把bug提给我了，只能我自己想办法了；出于对公司信息安全的考虑，我就不贴我在公司写项目代码了，我下面写个小demo来说明解决这种情况的原理，具体使用请根据大家的项目自行变通：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 因为这个图片地址是没问题的 -->
    <!-- 如果后台出现问题， 就会走下面的img1.onerror方法-->
    <img id="img1" src="http://p4.so.qhimg.com/t018349127914f495ce.jpg" alt="" srcset="">
</body>
</html>
<script>
    var img1 = document.getElementById('img1')
    var i = 0   //初始化图片加载失败请求次数
    // 图片一旦加载成功了的时候，就会调用这个函数
    img1.onload = function (param) { 
        console.log('图片加载成功')
     }
     //当每次图片加载失败了，都会调用这个函数
    img1.onerror = function (err) {
        if(i>10){           //图片加载失败函数是否调用超10次？如果超10次，就return
                            //避免无限制的发送请求
                        
            return
        }
        //在链接后面拼接'?'+Math.random()  是为了每次请求清除图片缓存,
        //避免再次请求的时候调用了上次无用的地址
        err.target.src = "http://p4.so.qhimg.com/t018349127914f495ce.jpg"+'?'+Math.random();
        i++   
    }
</script>

原网址: 访问
创建于: 2018-10-13 16:24:17
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论