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” ...
随机推荐
- 聊聊、Highcharts 动态数据
最近项目中需要用到图表,找了几个开源框架,最后选择 Highcharts,原因是 Highcharts 功能强大,稳定,方便,而且开源,社区比较成熟. 首先下载 Highcharts,导入项目. 在 ...
- PHP中define()和const定义常量的区别
在PHP中可以通过define()和const两种方式定义常量可是在开发中我们应该什么时候用define()定义常量,什么时候用const定义常量? 这两种方式定义常量的主要区别是什么? 从5.3版本 ...
- Tomcat 禁用PUT方法, 404/500错误重定向, 网站图标
(1) Tomcat禁用Put等不安全方法. <security-constraint> <web-resource-collection> <web-resource- ...
- [linx学习篇] ssh远程服务器免密码
第一步:生成密钥.在终端下执行命令: ssh-keygen -t rsa 一路回车,各种提示按默认不要改,等待执行完毕.然后执行: ls ~/.ssh #可以看到两个密钥文件:id_rsa(私钥) i ...
- TOJ4277: Sequence 组合数学
4277: Sequence Time Limit(Common/Java):2000MS/6000MS Memory Limit:65536KByte Total Submit: 39 ...
- ajax对象的获取及其常用属性
ajax对象的获取及其常用属性 (1)什么是ajax asynchronous javascript and xml(异步的javascript和xml). 是一种用来改善用户体验的技术,其实质是利用 ...
- centos中简易安装docker
centos中简易安装docker准备环境要求:请确保自己的centos的内核版本大于3.10,使用如下linux命令: uname -r1显示如下类似信息: 3.10.0-862.3.3.el7.x ...
- [暑假集训--数位dp]UESTC250 windy数
windy定义了一种windy数. 不含前导零且相邻两个数字之差至少为22 的正整数被称为windy数. windy想知道,在AA 和BB 之间,包括AA 和BB ,总共有多少个windy数? Inp ...
- python基于SQLAlchemy的DBtools
新版,只创建一次线程池 # -*- coding: utf-8 -*- from sqlalchemy import create_engine from sqlalchemy.orm import ...
- nvm、node、npm安装以及pycharm配置eslint
nvm.node.npm之间的区别 1. nvm的官方叫法:nodejs版本管理工具. nvm相当于是家长,一个家长可以管理多个孩子. 也就是说:一个nvm可以管理很多node版本和npm版本. 2. ...