纯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. MongoDB 命令速查表

    MongoDB  是一个面向文档可扩展的高性能开源数据库,典型的应用场景有网页数据,缓存,代替文档存储等. 命令的记忆和使用是一门基本功,这里准备了速查表,可以做案头手册. 库操作 切换或使用数据库 ...

  2. java 面向对象2

    1.  类是对某一类事物的抽象描述,而对象用于表示现实中该类事物的个体. 玩具模型是类: 玩具是对象: ★局部变量和成员变量的区别: 区别一:定义的位置不同 定义在类中的变量是成员变量 定义在方法中或 ...

  3. cf1189解题报告

    cf1189div2解题报告 codeforces A 答案要不是一串要不就是去掉最后一个字母的两串 #include <bits/stdc++.h> #define ll long lo ...

  4. NOI2019 Day1游记

    Day1挂了,没什么好说的... 开场T1想到70分暴力就走人了,后来发现可以写到85...(听说有人写dfs过了95?233333) T2刚了2个多小时,得到每次只在中间填最大值的结论后不会区间DP ...

  5. Executors.newSingleThreadScheduledExecutor() 问题

    ScheduledExecutorService service = Executors.newSingleThreadScheduledExecutor(); service.scheduleWit ...

  6. IDEA 调试图文教程,让 bug 无处藏身!

    阅读本文大概需要 6.2 分钟. 来源:http://t.cn/EoPN7J2 Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行 ...

  7. 20190815网络与信息安全领域专项赛线上赛misc WriteUp

    目录 签到题 题目内容 使用工具 解题步骤 七代目 题目下载地址 使用工具 解题步骤 亚萨西 题目下载链接 使用工具 解题步骤 24word 题目下载链接 使用工具 解题步骤 感想 几星期前报了名却完 ...

  8. mysql左连接查询结果不准确

    现有四张表 表(1)res_resource_catalog 表(2)res_catalog_classify 表(3)res_resource_classify 表(4)res_resource_m ...

  9. 【Beta】Phylab 测试报告

    PhyLab Beta 测试报告 测试中发现的bug Beta阶段新Bug Bug 可能原因 markdown生成的报告可能溢出显示框 表格过长,显示框未设置横向溢出 移动端实验区无法评论 移动端社区 ...

  10. CCF认证 201903-4消息传递接口

    题目 代码 #include <iostream> #include <stdio.h> #include <stdlib.h> #include <stri ...