1. 程式人生 > >小程序加載圖片失敗,默認圖片的替換方法

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

默認 替換方法 shadow url 返回 字段 list url地址 dex

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

技術分享圖片

技術分享圖片
技術分享圖片
大致思路:我們會在data數據中得到一個list一樣的圖片數據,或者你可以當成接口返回的數據結構,然後我們循環整個數據的時候會在image標簽找不到資源的時候error事件,我們就會得到一個失敗實例的方法,然後我們在數據循環的時候可以得到list的index值,也就是索引值。把這個值傳到error方法中進行list數據的替換就可以了。怎麽樣簡單吧~

其他
因為小程序比較特殊,就拿H5為例,其實在原生的HTML標簽中是有這個onerror這個方法的。

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

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