纯css解决方案:

<img src="broken.png" alt="">
img {
position: relative;
} img:after {
content: url('替代圖片');
display: block;
position: absolute;
// 底下是故意要填满并且背景填滿擋住底下那個很醜的加載失敗圖片(字体)
z-index:;
top:;
left:;
width: 100%;
height: 100%;
background-color: #fff;
}

这样使用是应为img标签的一些特性:

1,img是个比较特殊的标签,和video一样具有被替代性,所有当图片加载成功时,原先定义的伪类会失去作用不提示。

2,alt属性会在图片加载失败是出现(替代文字),这样伪类就会起作用了。

网上很多说这样也可以解决,但我测试暂未成功:

<div class="bg">
<img :src="goods.phoneFloorAd.resUrl" :onerror="errorImg01">
</div>
<script type="text/ecmascript-6">
export default {
data () {
return {
errorImg01: 'this.src="' + require('assets/images/load_logo01.png') + '"'
       };
    }
}
</script>

vue判断图片为空或者图片加载不成功时显示默认图片的更多相关文章

  1. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  2. 在WebView中加载HTML页面时显示进度对话框的方法

    webView.setWebViewClient(new WebViewClient(){            ProgressDialog prDialog;            @Overri ...

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

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

  4. Glide加载圆形图片第一次只显示默认图片

    Glide加载圆形图,又设置了默认图,很多时候第一次加载的时候只显示默认图.下面的方案可以解决.\ Glide.with(AudioDetailActivity.this) .load(cover) ...

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

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

  6. (BUG已修改,最优化)安卓ListView异步加载网络图片与缓存软引用图片,线程池,只加载当前屏之说明

    原文:http://blog.csdn.net/java_jh/article/details/20068915 迟点出更新的.这个还有BUG.因为软引应不给力了.2.3之后 前几天的原文有一个线程管 ...

  7. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  8. android--------Universal-Image-Loader图片加载框架和结合LruCache缓存图片

    本博客包含包含Android-Universal-Image-Loader 网络图片加载框架实现图片加载和结合universal-image-loader与LruCache来自定义缓存图片,可以设置缓 ...

  9. Android 高清加载巨图方案 拒绝压缩图片

    Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...

随机推荐

  1. OpenCV 学习笔记(11)【OpenCV】光流场方法标出前景(运动)和背景(静止)

    用光流场方法,标出前景(运动)和背景(静止). 环境:VS2017 + OpenCV3.4.1 光流场介绍可以参见英文版学习OpenCV3的第17章Tracking 英文原版学习OpenCV3下载链接 ...

  2. 如何保证javascript算数计算结果的精度

    前言: 我们先看如下这个js的代数计算结果,什么? 明显不是我们想要的结果3.52!! 备注:其实这个小数计算精度问题,在弱类型语言python等语言中同样存在. 问题原因之所在: JavaScrip ...

  3. Numpy | 12 数组操作

    Numpy 中包含了一些函数用于处理数组,大概可分为以下几类: 修改数组形状 翻转数组 修改数组维度 连接数组 分割数组 数组元素的添加与删除 一.修改数组形状 函数 描述 reshape 不改变数据 ...

  4. Scrapy爬虫案例 | 数据存储至MySQL

    首先,MySQL创建好数据库和表 然后编写各个模块 item.py import scrapy class JianliItem(scrapy.Item): name = scrapy.Field() ...

  5. 6.学习springmvc的文件上传

    一.文件上传前提与原理分析 1.文件上传必要前提: 2.文件上传原理分析: 3.需要引入的jar包: 二.传统方式文件上传程序 1.pom.xml <dependency> <gro ...

  6. 如何安全地使用redis的pop命令

    Redis的list经常被当作队列使用,左进右出,一般生产者使用lpush压入数据,消费者调用rpop取出数据. 这是很自然的行为,然而有时会发现lpush成功,但rpop并没有取到数据,特别是一些客 ...

  7. AcWing 95 费解的开关

    目录 前言 题目链接 思路 代码 前言 博客咕咕咕了好久了,是时候写一下了 题目链接 AcWing 95 费解的开关 思路 首先可以看出 1.每一个位置顶多只会操作一次.因为如果操作两次的话,相当于不 ...

  8. request登录案例

    一.案例需求 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表 3.使 ...

  9. JavaScript map reduce

    23333333333333 map var s = []; for(let i=0;i<10;i++){ s.push(i); } function pow(x){ return x*x; } ...

  10. navigator对象(了解即可)

    navigator是window的子对象 navigator.appName // Web浏览器全称navigator.appVersion // Web浏览器厂商和版本的详细字符串navigator ...