本文實例為大家分享了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");;};
針對尺寸不統一的:先顯示默認圖片,加載成功時移除默認圖片,填充背景。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答