vue判断图片为空或者图片加载不成功时显示默认图片
纯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判断图片为空或者图片加载不成功时显示默认图片的更多相关文章
- JS检查当图片不存在时显示默认图片和键盘大小写键状态
当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...
- 在WebView中加载HTML页面时显示进度对话框的方法
webView.setWebViewClient(new WebViewClient(){ ProgressDialog prDialog; @Overri ...
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- Glide加载圆形图片第一次只显示默认图片
Glide加载圆形图,又设置了默认图,很多时候第一次加载的时候只显示默认图.下面的方案可以解决.\ Glide.with(AudioDetailActivity.this) .load(cover) ...
- vue中的图片加载与显示默认图片
HTML: <div class="content-show-img"> <div class="show-img"> <img ...
- (BUG已修改,最优化)安卓ListView异步加载网络图片与缓存软引用图片,线程池,只加载当前屏之说明
原文:http://blog.csdn.net/java_jh/article/details/20068915 迟点出更新的.这个还有BUG.因为软引应不给力了.2.3之后 前几天的原文有一个线程管 ...
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- android--------Universal-Image-Loader图片加载框架和结合LruCache缓存图片
本博客包含包含Android-Universal-Image-Loader 网络图片加载框架实现图片加载和结合universal-image-loader与LruCache来自定义缓存图片,可以设置缓 ...
- Android 高清加载巨图方案 拒绝压缩图片
Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...
随机推荐
- Let Start
A free timing software with very small memory occupation. This tool is a pure green convenient off ...
- vim命令(转)
1.Linux下创建文件 vi test.txt 或者 vim test.txt 或者 touch test.txt 2.vi/vim 使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Co ...
- vue基于iview树状表格,封装完善
先安装iview后在使用 完善按钮不显示问题 ,当children过多时,点击不动问题等 封装 <template> <div :style="{width:tableWi ...
- django的惰性查询
django中的查询,在写好查询条件之后,在不调用变量的时候,sql是不会执行的,只有在调用变量的时候,才回去执行, 在一次查询之后,会把变量放进内存,下次再使用这个变量的时候就会使用内存汇总的值. ...
- Android编程权威指南笔记2:解决R文件爆红问题和SDK概念
在android studio中会遇到R文件的丢失,所以遇见这问题怎么解决呢? 重新检查资源文件中xml文件 最近一次编译时如果未生成R.java文件,项目中资源引用的地方都会出错.通常,这是某个xm ...
- springboot 调用webservice
参考:https://www.liangzl.com/get-article-detail-12711.html https://www.cnblogs.com/e206842/p/9047294.h ...
- cocos: 链接错误: _lz_adler32 in liblibquickmac.a
错误: Undefined symbols for architecture x86_64: "_adler32", referenced from: _lz_adler32 in ...
- java核心技术卷上学习笔记
9月5日 学习章节:第二章 Java程序设计环境 学习包括Java的安装.命令行工具.IDE.图形化开发环境等. 9月6日 学习章节:第三章 Java的基本程序设计结构 学习包括注释.数据类型.变量. ...
- Java编程思想之四控制执行流程
程序必须再执行过程中控制它的世界,并做出选择.在Java中,你要使用执行控制语句来做出选择. 4.1true和false 所有条件语句都利用条件表达式的真或假来决定执行路径. Java不允许使用数字作 ...
- 彻底搞懂BERT
https://www.cnblogs.com/rucwxb/p/10277217.html