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: 本文出自:[张 ...
随机推荐
- python --装饰器内容讲解
python装饰器就是用于拓展原来函数功能的一种函数,这个函数的特殊之处在于它的返回值也是一个函数,使用python装饰器的好处就是在不用更改原函数的代码前提下给函数增加新的功能. 3.1 定义装饰器 ...
- MongoDB Map Reduce(转载)
MongoDB Map Reduce Map-Reduce是一种计算模型,简单的说就是将大批量的工作(数据)分解(MAP)执行,然后再将结果合并成最终结果(REDUCE). MongoDB提供的Map ...
- cube.js 集成cratedb 的尝试
cratedb 提供了pg协议的兼容,我们可以直接使用pg client 连接,但是也不是完整实现pg 协议的 以下是 cube.js 集成cratedb 的一些尝试 环境准备 docker-comp ...
- ffmpeg结合SDL编写播放器(二)
我们将对帧数据做一些处理,比如将每一帧的 图像转为jpg或者bmp或者ppm等格式保存下来. 举例:在ffmpeg-2.8.8文件夹下编写test.c程序 /* test.c */ #include& ...
- 组件&Props
组件允许你将Ui拆分为独立可复用的代码片段,并对每个片段进行独立构思.本指南只在介绍组件的相关概念.你可以参考详细组件 API. 组件,从概念上类似与JavaScript函数.它接受任意的入参(既“p ...
- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'TableName'中的标识列指定显式值
当某表的一个列为自动增长列,是无法直接通过insert语句向给字段写入指定值,解决方法: SET IDENTITY_INSERT TABLE_NAME ON; INSERT INTO TABLE_NA ...
- pg数据库中时间查询的方式
方法一:select * from user_info where create_date>= '2015-07-01' and create_date < '2015-08-15'; 方 ...
- IIS连接数、并发连接数、最大并发工作线程数、应用程序池的队列长度、应用程序池的最大工作进程数详解
IIS:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池的最大工作进程数详解 iis性能指标的各种概念:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池 ...
- unix_timestamp 时间戳函数用法(hive)
pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...
- ipa重签名最直接的教程
ipa 包重签名最新最简单教程 重签名的意义:ipa 重签名最大的用处是,不必重新打包,和配置其它第三方获取 appkey 等操作,直接重签名之后依然可以拥有这些功能,更快的发布测试或者灰度版本. 本 ...