vue中對於圖片是否正常載入的思考

問題：由於業務需要，我們需要判斷圖片能否正常的載入，如果未正常載入的話，需要顯示一張預設圖片；

方案：1，由於後臺返回的是一個圖片id數組，例如 imgList=['343313131','21333413244','3312w232211'],圖片的完整路徑應為http://公司伺服器地址/xxxx/read?fileId='圖片id'，可以看成一個請求，先對圖片的src請求一次，如果請求成功，返回的結果（res）data裡面應該是一串二進位亂碼，如果返回的結果中data屬性裡面有code，值不為0，則說明圖片是無效的。

           2，onerror事件此時傳入當前的元素並修改src

實施方案： 第一種方案

/*圖片檢驗2*/
//that為傳入的img數組
//name為屬性名字例如[{id:'343313131'}],此時name就為'id';
//apiBaseUrl 為功能變數名稱
//fileConfigServer 為讀取路徑
//imgSrcPath 為參數名例如 '?fileId='
import axios from 'axios';
Vue.prototype.testImg2 = function(that, name) {
    
    function* change() {
        for(let j=0;j<that.length;j++){
            let result = yield ajax(j);
        }
      let result = yield ajax();
    }
    var newchange = change();
    function ajax(i){
                axios({
            method: 'post',
            url: apiBaseUrl + fileConfigServer + imgSrcPath + that[i][name]
        }).then(res => {
            that[i][name] = res.data.code ? false : apiBaseUrl + fileConfigServer + imgSrcPath + that[i][name];//（1）
            console.log(res); //列印結果
            newchange.next();

        }).catch(err => {
            console.log('失敗')
        })
        }
    newchange.next();
    
}

結果：列印res如下:

     第一個為顯示不正常的，data中返回了data相關欄位code為-1，第二個為顯示正常的data的值為二進位代碼

（1）中即為如果返回有code 則將圖片的id值記為false，vue界面可採用 v-if來顯示正常圖片與載入失敗的圖片
問：這裡為什麼採用yiled？
答：因為是非同步請求，無法判定第幾個先返回，但為了保證之前的順序，所以在請求完成的時候調用next進行下一次請求，也可以採用






  方案二，方案二是比較簡單的
  直接給圖片綁定error事件即可，例如:

//html中
<img @error="handleError($event)"/>
 //methods中：
   handleError(e){
   e.currentTarget.src="預設圖片地址"
}

      方案二註意：1，如果圖片是迴圈出來的用這種方案是沒有問題的，註意火狐可能不相容onerror事件，可以採用背景圖片代替

                            2，如果圖片單獨的不是迴圈出來的，比如封面之類的，加入logo來自於後臺 ，即src是動態的建議如下：

//html中
<img v-if="imgurl" :src="imgurl"/>
//js中 請將imgurl初始值賦值為null

                           這樣做的原因：html會優先解析img元素會被創建，而此時imgurl還在請求中值不存在，此時就會觸發onerror事件，如果加v-if，html不會解析img標簽，當然元素不會創建。