平常在項目中，我們會經(jīng)常需要有加載網(wǎng)絡(luò)圖片的功能惨远，但是存在圖片地址問題、網(wǎng)絡(luò)問題等導(dǎo)致圖片加載失敗话肖，需要展示一個占位圖北秽，所以我這里總結(jié)了三種辦法，僅供大家參考最筒，寫的不好大家見諒贺氓。
一、導(dǎo)入第三方插件床蜘，本人沒有使用過辙培，所以不知道質(zhì)量如何蔑水，大家有興趣可以去詳細(xì)研究下（傳送門）
二、監(jiān)聽image標(biāo)簽的@error事件進行占位圖的顯示,這里我直接貼代碼扬蕊，大家看看邏輯即可明白搀别。
注意：這里有點不好的就是一開始顯示的都是空白的，只有圖片加載成功或者失敗后才會顯示正常圖片還是占位圖
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":"第一個","id":0},
{"icon":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1255632579,1714788604&fm=26&gp=0.jpg","title":"第二個","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":"第三個","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":"第四個","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":"第五個","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":"第六個","id":5},
{"icon":"https://www.baidu.com/image_0.png","title":"第七個","id":6}//這里最后一張是錯誤的地址
]
}
}
樣式代碼：
三尾抑、使用兩個image標(biāo)簽歇父，一個image用來展示占位圖、一個用來展示網(wǎng)絡(luò)圖再愈。（這種在數(shù)據(jù)量比較大的情況下榜苫，不推薦使用，這里我只是提供下思路翎冲，如果大家有更好的可以分享下）
這種方法和第二種方法就是對換了一下思路垂睬，默認(rèn)顯示了全部占位圖，等待監(jiān)聽圖片加載成功府适，然后把image占位圖標(biāo)簽進行隱藏羔飞。
代碼如下：
data的數(shù)據(jù)和第二種方法的數(shù)據(jù)一樣，不同于methods里面的事件
樣式代碼：
我這里總結(jié)的就這二個方法檐春，如果各位大佬有更好的方法記得分享哈逻淌。如果寫的不好，大家跳過就好????
第二疟暖、三種方法的參考文章：uni-app圖片未加載完處理
