圖片找不到的處理方案

在HTML中圖片找不到的解決方法

• 在html中，img標籤的圖片路徑資源找不到或者服務器上的圖片損壞，除了能夠用alt屬性用文字提示圖片的內容告訴用戶外，還能夠用onerror屬性，用另一張專門用於處理圖片容錯的圖片代替它，這裏搭建了一個最簡單的demo文件夾，裏面包含一個html文件、一張須要上傳的圖片和一張解決容錯的圖片

• onerror屬性的使用方法以下：

  onerror="this.src='XXX.jpg'"

• 具體實現方法以下：
  
• 正確的圖片路徑應該爲example.jpg,此時，瀏覽器呈現出的圖片是error_img.jpg：
  
• 而正確修改路徑後：

小程序開發中處理圖片找不到問題

• 在小程序開發中，處理圖片錯誤的方法與html有區別，在官方文檔中也給咱們了這樣一個替代圖片的方法：

• 在image標籤中添加方法：

binderror="onImageError"

• 在相應的js文件中寫一個咱們定義的處理圖片錯誤的方法，這裏咱們是onImageError方法：

onImageError: function(e){
    var index = e.currentTarget.dataset.index;  //獲取咱們在image標籤中傳過來的data-index的數據，以獲取下標
    var topList = this.data.topList; //獲取data中接收咱們發出請求得到響應的數據
    var errorImageItem = topList[index]; //獲取圖片出錯的對象
    errorImageItem.images.large = '../../images/error_img.jpg'; //把路徑修改成咱們的替代圖片
    topList[index] = errorImageItem; //把修改完路徑後的對象覆蓋原先的對象
    this.setData({
      topList: topList //從新賦值
    })
  }

• 處理後的結果以下：