平常在項(xiàng)目中，我們會(huì)經(jīng)常需要有加載網(wǎng)絡(luò)圖片的功能，但是存在圖片地址問題、網(wǎng)絡(luò)問題等導(dǎo)致圖片加載失敗，需要展示一個(gè)占位圖，所以我這里總結(jié)了三種辦法，僅供大家參考，寫的不好大家見諒。
一、導(dǎo)入第三方插件，本人沒有使用過，所以不知道質(zhì)量如何，大家有興趣可以去詳細(xì)研究下（傳送門）
二、監(jiān)聽image標(biāo)簽的@error事件進(jìn)行占位圖的顯示,這里我直接貼代碼，大家看看邏輯即可明白。
注意：這里有點(diǎn)不好的就是一開始顯示的都是空白的，只有圖片加載成功或者失敗后才會(huì)顯示正常圖片還是占位圖
data里面的一些初始化數(shù)據(jù)
data() {
return {
placeholderImage:'/static/logo.png',//占位圖
dataList: [
{"icon":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg","title":"第一個(gè)","id":0},
{"icon":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1255632579,1714788604&fm=26&gp=0.jpg","title":"第二個(gè)","id":1},
{"icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150330876&di=d0cc080391333c69725d2829a8ea6e76&imgtype=0&src=http%3A%2F%2Fimg.improve-yourmemory.com%2Fpic%2F2bb85a1310c35a39d33987a88c2725c5-2.jpg","title":"第三個(gè)","id":2},
{"icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150330876&di=2865923abaf09b0b86a37007810718c8&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1305%2F24%2Fc1%2F21266756_1369385228661.jpg","title":"第四個(gè)","id":3},
{"icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150330875&di=6066b7458f3352b58f9ee5c09fa5c4db&imgtype=0&src=http%3A%2F%2Fztd00.photos.bdimg.com%2Fztd%2Fw%3D700%3Bq%3D50%2Fsign%3De4fb138eefcd7b89e96c38833f1f339a%2F3bf33a87e950352af6a0364c5a43fbf2b3118bb4.jpg","title":"第五個(gè)","id":4},
{"icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597150330874&di=22b9607cd676607019728a104953b8b9&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F656%2Fw580h876%2F20180722%2F1553-hfqtahi6951449.jpg","title":"第六個(gè)","id":5},
{"icon":"https://www.baidu.com/image_0.png","title":"第七個(gè)","id":6}//這里最后一張是錯(cuò)誤的地址
]
}
}
樣式代碼：
三、使用兩個(gè)image標(biāo)簽，一個(gè)image用來展示占位圖、一個(gè)用來展示網(wǎng)絡(luò)圖。（這種在數(shù)據(jù)量比較大的情況下，不推薦使用，這里我只是提供下思路，如果大家有更好的可以分享下）
這種方法和第二種方法就是對(duì)換了一下思路，默認(rèn)顯示了全部占位圖，等待監(jiān)聽圖片加載成功，然后把image占位圖標(biāo)簽進(jìn)行隱藏。
代碼如下：
data的數(shù)據(jù)和第二種方法的數(shù)據(jù)一樣，不同于methods里面的事件
樣式代碼：
我這里總結(jié)的就這二個(gè)方法，如果各位大佬有更好的方法記得分享哈。如果寫的不好，大家跳過就好????
第二、三種方法的參考文章：uni-app圖片未加載完處理
