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: 本文出自:[张 ...
随机推荐
- service里无法注入mapper,mapper空指针
被困扰了一天,终于解决了,记录一下 下面是mapper的代码 @Mapper public interface ProductDao { @Select("select * from pro ...
- swift语法之常量 变量 类型
常量和变量: 在swift中声明变量或者声明常量的时候可以不用写变量或者常量类型 因为系统会自动推导出对应的类型. 变量:可以更改值 swift中每句代码后面不需要加 ; 号 var num = 5 ...
- UFUN函数 UF_CURVE函数(UF_CURVE_create_line、UF_CURVE_create_arc、UF_CURVE_ask_arc_data、UF_CURVE_ask_line_data)
UF_initialize(); //CSYS_ask_wcs tag_t wcs_id=NULL_TAG; //CSYS_ask_csys_info ]={0.0}; //CURVE_create_ ...
- CLR Exception---E0434352
什么是CLR Exception---E0434352 CLR异常是.NET应用程序生成的异常类型.异常被封装在从System.exception类派生的类中.它的异常代码是0xE0434352,代码 ...
- C++ STL(标准模板库)的学习了解
C++ STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表.队列.栈. C++ 标准模板库的核心包括以 ...
- linux 搭建局域网YUM源仓库服务器
yum简介 Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服 ...
- node.js 自启动工具 supervisor
supervisor 会不停的watch 你应用下面的所有文件,发现有文件被修改,就重新载入程序文件这样就实现了部署,修 改了程序文件后马上就能看到变更后的结果.麻麻再也不用担心我的重启 nodejs ...
- PowerDesigner应用01 逆向工程之配置数据源并导出PDM文件
物理数据模型(Physical Data Model)PDM,提供了系统初始设计所需要的基础元素,以及相关元素之间的关系:数据库的物理设计阶段必须在此基础上进行详细的后台设计,包括数据库的存储过程.操 ...
- NIOBuffer 缓冲区
Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但是,Channel,Buffer 和 Select ...
- C++的static_cast、dynamic_cast和const_cast用法
static_cast.dynamic_cast和const_cast static_cast: 用法: static_cast < type-id > (expression) ...