zoukankan      html  css  js  c++  java
  • vue 图片加载错误显示默认图片

    参考文档 https://www.cnblogs.com/z937741304/archive/2019/11/06/11809547.html

    方法一: onerror

    onerror加载默认图片

    方法二:自定义指令

    建议先加载图片,图片加载错误后加载默认图片,自定义指令可在不同页面使用,避免代码重复。

    /**
    * 检测图片是否存在
    * @param url
    */
    let imageIsExist = function (url) {
      return new Promise((resolve) => {
        var img = new Image();
        img.onload = function () {
          if (this.complete == true) {
            console.log('资源加载');
            resolve(true);
            img = null;
          }
        }
        img.onerror = function () {
          console.log('资源error', img);
          resolve(false);
          img = null;
        }
        img.src = url;
      })
    };
    
    
    
    // 单独作用于应用模块的管理
    // 传的是错误的图片
    Vue.directive('err-img', async function (el, binding) {
      let imgURL = binding.value;//获取图片地址
      let realURL = el.src;
      if (imgURL) {
        let exist = await imageIsExist(realURL);
        if (!exist) {
          el.setAttribute('src', imgURL);
        }
      }
    });

    使用

     <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt=""> 

    方法三:当异步获取图片加载失败

    异步获取图片链接,图片加载成功则显示成功的url,加载失败显示默认 defaultImg 图片

    // 在接口中获取图片链接后调用this.loadImg
    loadImg(url) {
          const img = new Image();
          img.src = url;
          img.onload = () => {
            this.imageUrl = url;
          };
          img.onerror = () => {
            this.imageUrl = this.defaultImg;
          };
        },
    <img class="img-url" :src="imageUrl" />
  • 相关阅读:
    CentOS6、CentOS7配置Base源和epel源
    谢孟媛_初级英文文法_讲义!全!!
    java动态代理实现与原理详细分析
    聊聊spring的那些扩展机制
    springboot+druid+mybatis plus的多数据源配置
    基于CAS实现SSO单点登录
    mybatisPlus整理
    Python实现1-100之和
    python接口自动化--get请求
    使用fiddler进行接口测试
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/12580014.html
Copyright © 2011-2022 走看看