zoukankan      html  css  js  c++  java
  • 图片加载时或者加载失败处理(vue)

    图片加载时或者加载失败处理(vue)

    //课评系统在index.js 中添加自定义组件
    //全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片
    //========index.js======
    Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img
        let imgURL = binding.value;//获取图片地址
        if (imgURL) {
            let exist = await imageIsExist(imgURL);
            if (exist) {
                el.setAttribute('src', imgURL);
            } 
        }
    })
    /**
     * 检测图片是否存在
     * @param url
     */
    let imageIsExist = function(url) {
        return new Promise((resolve) => {
            var img = new Image();
            img.onload = function () {
                if (this.complete == true){
                    resolve(true);
                    img = null;
                }
            }
            img.onerror = function () {
                resolve(false);
                img = null;
            }
            img.src = url;
        })
    }
    
    //页面引用
    <img src="../images/headimg.png" v-real-img="student.headimgurl" alt="" :title="student.studentname" class="imgBorder">
        
        2019-04-02 02:31:55
    
    
    
    
  • 相关阅读:
    嵌入式系统引导和启动的流程
    microblaze以太网程序
    机试题
    共模差分 对比
    xilinx XPS无法启动的问题
    FPGA开发流程
    Mel-Frequency-Warping
    微软-黄学东-清华大学FIT楼报告-20170407
    Matlab
    Anaconda安装
  • 原文地址:https://www.cnblogs.com/dzyany/p/14611701.html
Copyright © 2011-2022 走看看