请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

超实用,解决img标签src绑定了正确地址后,图片有时候不显示问题

2018-09-17 53热度

今天做项目的时候,遇到一个比较奇葩的问题,将后台返回的图片地址链接绑在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>

 

收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...