vue Picture Load and Display Default Picture Instance Code

This article example for everyone to share the vue picture loading and display the specific code of the default picture, for your reference, the specific content is as follows

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");;
};

For size is not unified 1: first display the default picture, when the load is successful, remove the default picture, fill in the background.