小程序加載圖片失敗，默認圖片的替換方法

需求

前端請求後臺的接口的時候回，數據會返回圖片的url地址，可是有的時候多是數據字段的錯誤，或者是返回的連接中信息是404，那麼前端這邊怎麼處理。

小程序

在小程序的官方文檔中有提到,binderror這個事件方法，就是說當你的圖片加載失敗或者404的時候會在方法中有對應的返回值，具體返回的值入下圖

場景

這樣的話應用的場景就課程是頭像上傳報錯或者單張圖片，要是你報錯的圖片是一個列表中的不少的圖片怎麼辦？

多張圖片報錯解決方法

其實很簡單，咱們用小程序的wepy框架爲例:

大體思路：咱們會在data數據中獲得一個list同樣的圖片數據，或者你能夠當成接口返回的數據結構，而後咱們循環整個數據的時候會在image標籤找不到資源的時候error事件，咱們就會獲得一個失敗實例的方法，而後咱們在數據循環的時候能夠獲得list的index值，也就是索引值。把這個值傳到error方法中進行list數據的替換就能夠了。怎麼樣簡單吧~

其餘

由於小程序比較特殊，就拿H5爲例，其實在原生的HTML標籤中是有這個onerror這個方法的。

<img src="404" width="60" height="60" onerror="this.src='默認報錯替換的圖片'>

結束

其實方法很簡單，查了一下資料以爲應該整理一下，但願你們能學到。