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

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

日期：2018-09-17点击：912收藏

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

原文链接：https://my.oschina.net/u/3964830/blog/2052555

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。