您的位置：首页 > 其它

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

2018-09-17 18:17 861 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航