基于angular4写的一个指令,在ionic3.x项目在用。因为加载图片超时等原因导致图片显示不出来,需要替换成默认或者指定图片

1.err-src.ts

import { Directive,Input } from '@angular/core';
@ Directive({
selector: '[err-src]', // Attribute selector
host: {
'(error)': 'onError($event.target)'
}
})
export class ErrSrcDirective { constructor() {} private image = './assets/img/store_list/mo_icon_1.png'; @Input('err-src')
set backImg(img:string) {
if (img) this.image = img;
} onError(e) {
e.src = this.image;
}
}

  

2.err-src.module.ts

import { NgModule } from '@angular/core';
import { ErrSrcDirective } from './err-src';
@NgModule({
declarations: [ErrSrcDirective],
imports: [],
exports: [ErrSrcDirective]
})
export class ErrSrcDirectiveModule {}

  

3.用法 :

注入指令

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {MinePage} from './mine';
import {HttpClientModule} from '@angular/common/http';
import { ErrSrcDirectiveModule } from '../../directives/err-src/err-src.module'; @NgModule({
declarations: [
MinePage,
],
imports: [
IonicPageModule.forChild(MinePage),
HttpClientModule,
ErrSrcDirectiveModule,
],
})
export class MinePageModule {
}

html

<img src="{{baseInfo.photo || './assets/img/df-u-img.png'}}" err-src="./assets/img/df-u-img.png" alt="">
指令后面可替换默认图片路径,不写的话默认图片在指令里面配置

  

angular--解决angular图片加载失败问题的更多相关文章

  1. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  2. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  3. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  4. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

  5. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  6. css背景图片加载失败,页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  7. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  8. JavaScript-onerror事件:图片加载失败后不显示

    HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...

  9. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  10. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

随机推荐

  1. Android Studio打包过程和应用安装过程

    三个部分,检查项目和读取基本配置,Gradle Build,Apk Install和LaunchActivity. 应用安装到手机,会复制APK安装包到data/app目录下,解压并扫描安装包,把de ...

  2. C#时间格式化显示AM/PM

    .ToString("MM/dd/yyyy hh:mm:ss:ffff tt")); //12小时制 .ToString("MM/dd/yyyy HH:mm:ss:fff ...

  3. iOS开发小技巧 - UILabel添加中划线

    iOS开发小技巧 遇到的问题: 给Label添加中划线,然后并没有效果 NSString *str = [NSString stringWithFormat:@"合计金额 ¥%.2f&quo ...

  4. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  5. C语言 结构体(联合体)对齐规则

    /* 结构体(联合体)对齐规则 */ #include <stdio.h> #include <stdlib.h> #include <string.h> /* * ...

  6. modelsim如何使用tcl脚本来写编译文件

    对于modelsim进行仿真,可以通过GUI来进行仿真,当然更加快速的方法可以使用TCL脚本文件进行快速仿真. Modelsim采用TCL脚本文件仿真的具体流程如下所示:      具体的操作步骤如下 ...

  7. Variational RL for POMDP

    1.Le, Tuan Anh, et al. "Auto-encoding sequential monte carlo." arXiv preprint arXiv:1705.1 ...

  8. Groovy和Java互调

    Scala和Java为静态语言,Groovy为动态语言 Scala: 函数式编程,同时支持面向对象 Groovy: jvm上的脚本,较好兼容java语法,Groovy加强了Java集成. 可配置化的优 ...

  9. shell脚本学习笔记(符号)

    shell脚本的学习: 1.Shell的作用是解释运行用户的命令,用户输入一条命令,Shell就解释运行一条,这样的方式称为交互式(Interactive),Shell还有 一种运行命令的方式称为批处 ...

  10. VS2017 配置QT5

    QT安装 1. QT下载 2. 安装过程中,组件的选择(图自https://blog.csdn.net/gaojixu/article/details/82185694) 3. 安装完成 VS2017 ...