zoukankan      html  css  js  c++  java
  • 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");;
    };

    针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。

  • 相关阅读:
    LoadRunner
    LoadRunner
    LoadRunner
    LoadRunner
    Python
    hadoop for .Net
    MVC初学
    MVC初学
    android学习---面试一
    android学习---progressbar和ratingbar
  • 原文地址:https://www.cnblogs.com/xulei1992/p/6558294.html
Copyright © 2011-2022 走看看