源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue图片加载与显示默认图片实例代码

  • 时间:2020-10-27 00:00 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue图片加载与显示默认图片实例代码
本文实例为大家分享了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");;
};
针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部