本文實例為大家分享了vue圖片加載與顯示默認圖片的具體代碼，供大家參考，具體內容如下

HTML：

<div class="content-show-img">　　<div class="show-img">　　　　<img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg">　　</div></div>

JS：

Vue.prototype.successLoadImg = function(event) {  if (event.target.complete == true) {    event.target.classList.remove("default-image");;    var imgParentNode = event.target.parentNode;    if(imgParentNode.classList.contains('show-img')==true){      imgParentNode.style.background = "#000";    }  }};Vue.prototype.errorLoadImg = function(event) {  event.target.classList.add("default-image");;};

針對尺寸不統一的：先顯示默認圖片，加載成功時移除默認圖片，填充背景。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。