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: 本文出自:[张 ...
随机推荐
- 学习:Windows API核心DLL文件
在 Windows 的系统目录中,存在着很多的动态链接库文件(DLL 文件).这些 DLL 文件中包括了 Windows API 函数可执行程序. DLL 将各函数"导出",这样应 ...
- Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method 'POST' not supported (附带其余好几个坑)
yml: feign: httpclient: enabled: true properties: #feign feign.httpclient.enabled=true <!-- https ...
- Python I/O编程 -- 序列化
序列化 pickle模块,json模块 (1)把变量从内存中变成可存储或传输的过程,称之为序列化.Python中叫pickling,其他语言中也被称为serialization,marshalling ...
- Xamarin.Forms之主题
Xamarin.Forms应用程序可以使用DynamicResource标记扩展在运行时动态响应样式更改. 此标记扩展类似于StaticResource标记扩展,两者都使用字典键从ResourceDi ...
- 如何高效的阅读uni-app框架?(建议收藏)
作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...
- DataGrip:Error encountered when performing Introspect schema xxx 错误的解决方法
datagrip的问题,转载自: https://www.cnblogs.com/geb515/p/7995249.html 把Introspect using JDBC _metadata打上勾 然 ...
- 划水嘶吼misc
划水嘶吼misc [题目描述]: 开局一张图,flag全靠编 [题目writeup]: 瞅半天,瞅到二维码 然后用potplayer按帧查找到skr二维码 通过PS自动调整对比度,扫出key1,2,3 ...
- 【Beta】Scrum meeting 4
目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 照片 commit记录截图 小程序前端仓库 技术博客 写在前面 例会时间:5.8 22:30-23:00 例会地点:微信群语音 ...
- 《Maven实战》整理
一.maven介绍 Maven是优秀的构建工具,能够帮我们自动化构建过程,从清理.编译.测试到生成报告,再到打包和部署. Maven能帮助我们标准化构建过程.在Maven之前,十个项目可能有十种构建方 ...
- [asm] 小菜汇编基础和学习技巧小结(一)
以下小结纯属小菜自学过程产生的dump,大神请飘过! 汇编是一门庞大复杂的学问,在计算机的世界里差不多无所不入.很多编程领域都会或多或少跟汇编打交道.本人不是科班出身的程序员,所以很多基础都为零,学历 ...