1. 加载中默认图片:
    主要是onload事件监听,data中定义变量
  1. imgSrc require('./default.png');
  1. <div class="per-pic" v-for="(item, index) in picData" :key="index">
    <img :src="imgSrc" :onload="loadImg(item.url)" />
    </div>
  1. /*
    **图片加载中
    * */
    loadImg($img){
    return 'this.οnlοad=null;this.src='+'"'+$img+'";';
    },
  2.  
  3. 加载失败目前网上很多都是用onerror事件监听,然后给this.src赋值,压根不管用啊,试了半天不管用。
    css倒是能轻松解决,具体代码如下:
    img{
    width: 145px;
  4.  
  5. height: 145px;
  1. position: relative;
  1. &:after{
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 145px;
    background: url("./default.png") no-repeat;
    background-size: 100% ;
    background-color: #fff;
    }
  1. };
  2.  
  3. 觉得好用的,请点赞,蟹蟹。

vue中img图片加载中以及加载失败显示默认图片问题的更多相关文章

  1. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  2. img 加载网络图片失败 显示默认图片

    1. 概述 当从网络加载图片失败 希望显示默认图 img 标签有个 onerror属性 2. 代码 2.1 java服务端组织标签整个返回前端 String imgUrl = "javasc ...

  3. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  4. vue中的图片加载与显示默认图片

    HTML: <div class="content-show-img"> <div class="show-img"> <img ...

  5. Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  6. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  7. 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片

    很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...

  8. 在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足。....”

    在Windows7中打开照片,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试. ...

  9. img如果没有图片显示默认图片效果

    img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...

随机推荐

  1. Jenkins使用四:Jenkins创建任务,实现代码有改动时,自动构建

    新建任务 指定在哪台节点运行 添加要监控的git地址和使用账号,此账号为设置节点时配置公私钥时设置的ssh登录账号 设置检查代码是否有变更的频率,每三分钟检查一次,如果检查到有变更就构建 修改文件再提 ...

  2. jmeter之图片上传

    用jmeter来实现图片上传请求 目录 1.抓取参数 2.填写参数 1.抓取参数 第一步:先用fiddler抓取上传接口的参数 2.填写参数 第一步:在jmeter的参数列填写没有filename的这 ...

  3. Docker 官网文档翻译汇总

    官方文档地址 Guide Docker 入门 Docker 入门教程 方向和设置 容器 服务 swarm 集群 stack 部署应用 概述 用 Docker 进行开发 在 Docker 上开发应用 应 ...

  4. 16/8/23_CSS自动换行

    转载:http://blog.csdn.net/ye987987/article/details/8011875   自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺 ...

  5. TensorFlow学习笔记2-性能分析工具

    TensorFlow学习笔记2-性能分析工具 性能分析工具 在spyder中运行以下代码: import tensorflow as tf from tensorflow.python.client ...

  6. Show Me the Code

    最近在练习写Python代码,拥有150多道程序员面试题的LeetCode注重算法的实现,锻炼思维,还能在线测试代码的正确性,而Python练习册涉及到了Python实际的应用,锻炼解决问题的能力,托 ...

  7. python支持的进程与线程

    一.multiprocessing模块介绍 python中的多线程无法利用CPU资源,在python中大部分情况使用多进程.python中提供了非常好的多进程包multiprocessing. mul ...

  8. 《JAVA设计模式》之模板模式(Template)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  9. tab区域折叠

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>co ...

  10. Codeforces 1097D (DP+分解质因数)

    题目 传送门 分析 考虑\(n=p^q\)且p为质数的情况 设dp[i][j]表示经过i次变化后数为\(p^j\)的概率 则初始值dp[0][q]=1 状态转移方程为\(dp[i][j]=\sum{} ...