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” ...
随机推荐
- PHP全栈开发
DAY01_PHP基础第一天 01.了解php 00:09:26 ★ 02.php的开发环境准备 00:13:47 ★ 03.人人都会编程 00:10:26 ...
- wordpress 获取站点的所有链接
<?php include "wp-load.php"; $posts = new WP_Query('post_type=any&posts_per_page=-1 ...
- php处理文件和操作系统
一.文件和目录 (1).解析目录路径:basename()返回路径的文件名部分 获取路径目录:dirname() 返回除了文件名的路径部分 了解关于路径的更多信息:pathinfo() 返回关联数 ...
- Django底层原理简介与安装
Django环境目录搭建一栏: 利用wsgiref模块封装好的socket搭建服务端: #利用wsgiref模块封装好的socket演示操作(例如accept\recv) #也可以实现socket服务 ...
- django html render_to_response
#coding=utf-8 from django.shortcuts import render from blog.models import BlogPost from django.short ...
- API生命周期第二阶段——设计:如何设计API(基于swagger进行说明)
题外话 在新的项目中,推行了swagger用于对API的设计.以期待解决我们上篇博客中说到了一些现象,提升工作效率.那么,结合到当时和全项目组成员做培训,以及后续的给主要应用者做培训,以及当初自己接触 ...
- Nginx+PHPSTORM+Xdebug 配置
1. php Xdebug扩展 下载 https://xdebug.org/download.php 选择自己的版本下载,会得到一个dll文件 例如 php_xdebug-2.7.0alpha1-7 ...
- [Err] 1022 - Can't write; duplicate key in table '#sql-1500_26'
今天用powerdesigner修改了一些外键关系,有两个外键的名字取一样的,忘记改了.然后在用navicat运行sql文件时,报出[Err] 1022 - Can't write; dupl ...
- 【bzoj4247】挂饰 背包dp
题目描述 JOI君有N个装在手机上的挂饰,编号为1...N. JOI君可以将其中的一些装在手机上. JOI君的挂饰有一些与众不同——其中的一些挂饰附有可以挂其他挂件的挂钩.每个挂件要么直接挂在手机上, ...
- 【bzoj3526】[Poi2014]Card 线段树区间合并
题目描述 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的卡片了!第i个熊孩子会交换c[i]和d[i]两个位置上的卡片. ...