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

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

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

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章