angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
Angular 如何 处理 图片 加载 本地 失败 情况
2023-09-11 14:15:30 时间
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开发小笔记
- [Unit Testing Angular] RxJS Marble testing for Component
- [Angular] Upgrading to RxJS v6
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
- [Angular] In angular world and out angular world
- [Angular] Angular Asynchronous Form Validators
- [Angular] Upgrading to RxJS v6
- [Angular] Using ngTemplateOutlet to create dynamic template
- SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
- 如何从 SAP Spartacus Product Detail 页面,找到其 Angular 实现 Component 的位置
- 关于 Angular SSR 应用在渲染中止时如何避免内存泄漏问题的一些尝试
- 如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
- Angular页面发生更新时,更新如何从view层传递到model层
- 如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
- Angular input控件的click事件表达式如何被转换成JavaScript函数
- Angular 项目中 angular.json builder 字段的可选项介绍
- Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
- 如何创建 Angular 库并在 Angular 应用里调用
- Angular jasmine如何从detectChange触发refreshView进而执行到Component的hook实现
- 如何处理Angular应用的错误消息: No pipe found with name async
- angular基本知识学习笔记 - Component的基本概念