超實用，解決img標籤src綁定了正確地址後，圖片有時候不顯示問題

時間 2019-11-13

標籤實用解決 img 標籤 src 綁定正確地址圖片有時候顯示問題欄目 HTML 简体版

原文原文鏈接

今天作項目的時候，遇到一個比較奇葩的問題，將後臺返回的圖片地址連接綁在img標籤的scr上的時候，有時候會偶發的不顯示，可是將後臺返回的地址複製到瀏覽器，又能直接打開，我跑過去問後端，他說他知道這個問題，也說了半天，反正意思就是，這個問題之前就存在，確實後臺存在問題，可是由於某些緣由，他解決不了，看看咱們前端能不能曲線救國，我暈，那沒辦法了，測試已經把bug提給我了，只能我本身想辦法了；出於對公司信息安全的考慮，我就不貼我在公司寫項目代碼了，我下面寫個小demo來講明解決這種狀況的原理，具體使用請根據你們的項目自行變通：html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。