angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理
在directive中定义组件,在ng-src错误时,调用err-src
app.directive('errSrc',function(){
return {
link: function(scope, element, attrs){
if(attrs.src == 'undefined'){
attrs.$set('src', attrs.errSrc);
}
element.bind('error', function() {
if (attrs.src != attrs.errSrc) {
attrs.$set('src', attrs.errSrc);
}
});
}
}
});
页面调用:
<img ng-src="item.url" err-src="img/error.png" />
2.如何在ionic中加载本地图片 ?
对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算。
例如www/css/style.css要加../,否则在浏览器中可以正常显示,在设备上不行。
结构如下所示:
.login-page {
background:url(../img/signup_bg.png);
background-size: cover;
background-repeat: no-repeat;
}
但是对于在页面中定义的图片路径,从www路径开始算,否则浏览器中可显示,但设备上不行,img文件夹和index.html在一级,如:
<img src="img/commander.jpg" />
.
angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?的更多相关文章
- git问题:git提交的时候总是提示key加载失败,总是需要手工将key加到Pageant中
问题描述: 重装过一次系统,在重装之前git+tortoisegit配合很好,提交的时候都能自动加载ppk,但是重装系统后,也重新生成pulic key上传到了服务器,但是每次提交的时候都提示key加 ...
- 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作
点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...
- 如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务
如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务? 我这里的测试环境是ArcGISServer10.1和TerraExplorer Pro7.0,主要过程截图如下,
- 如何在mysql中存储音乐和图片文件
如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...
- Springboot项目中 前端展示本地图片
Springboot项目中 前端展示本地图片 本文使用的是Springboot官方推荐的thymeleaf(一种页面模板技术) 首先在pom文件加依赖 <dependency> <g ...
- 如何在latex 中插入EPS格式图片
如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...
- 解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
- [TimLinux] JavaScript 如何在AJAX中替换元素的图片
1. 示例代码 /* * <img id="idTestImg" src="/static/test.png" /> */ var idTestIm ...
- .Net语言 APP开发平台——Smobiler学习日志:如何在webview中加载网页
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobiler Components” ...
随机推荐
- NVIDIA NVML Driver/library version mismatch
sudo rmmod nvidia_drm sudo rmmod nvidia_modeset sudo rmmod nvidia_uvm sudo lsof /dev/nvidia* confirm ...
- 通过performance schema收集慢查询
MySQL5.6起performance schema自动开启,里面涉及记录 statement event的表 mysql> show tables like '%statement%'; + ...
- Linux硬件资源管理与外设设备使用、系统运行机制及用户管理
Linux硬件资源管理 PCI设备 显卡 $>>dmesg |grep -i vga[ 0.000000] Console: colour VG ...
- 【bzoj1954】Pku3764 The xor-longest Path Trie树
题目描述 给定一棵n个点的带权树,求树上最长的异或和路径 输入 The input contains several test cases. The first line of each test ...
- C# 时间与时间戳互转 13位|13位時間戳与日期换转
这里直接上代码 懂C# 的程序猿 一看便知道如何使用的... /// <summary> /// 将Unix时间戳转换为DateTime类型时间 /// </summary> ...
- ACM程序设计选修课——Problem F:(ds:图)旅游规划(优先队列+SPFA)
问题 F: (ds:图)旅游规划 时间限制: 1 Sec 内存限制: 128 MB 提交: 14 解决: 4 题目描述 有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路 ...
- 洛谷P4364 [九省联考2018]IIIDX 【线段树】
题目 [题目背景] Osu听过没?那是Konano最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐游戏.现在 ,他在世界知名游戏公司KONMAI内工作,离他的梦想也越来越近了.这款 ...
- Intellij IDE使用 ideavim,不能复制文档到系统粘贴板
vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...
- STL学习笔记(七) 程序中使用STL
条款43:算法调用优先于手写循环 class Widget { public: bool test(); }; vector<Widget> vec; 算法调用: for_each(vec ...
- 创建 Image
本节演示如何通过 Web GUI 和 CLI 两种方法创建 Image. OpenStack 为终端用户提供了 Web UI(Horizon)和命令行 CLI 两种交换界面.两种方式我们都要会用. 可 ...