解决angularjs图片加载失败

解决angularjs图片加载失败解决angularjs图片加载失败

大家好,又见面了,我是你们的朋友全栈君。

1

angularjs图片加载失败,本文的angularjs图片加载失败中的angularjs指的是angular2、angular4。

2

首先在img标签上添加error事件;
<
img [
src]=
“img”
alt=
“” (
error)=
“imgerror($event)”/>

3

然后在xxx.component.ts里实现imgerror方法,代码如下:
/**
* 处理图片加载失败
*
@param
e
*/
imgerror(
e) {
//图片加载失败的默认显示图片
const defultImg
=
‘http://avatar.csdn.net/1/A/1/3_zzwwjjdj1.jpg’;
e.srcElement.src
= defultImg;
//防止默认图片加载失败,造成死循环
e.srcElement.
removeEventListener(
‘error’);
};

这样,当图片加载失败的时候就会显示默认图片,当然图片在很多个组件内都可能存在,

写一个公共方法即可。

意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/138953.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Jmeter正则表达式提取器获取Token-简单实例「建议收藏」

    Jmeter正则表达式提取器获取Token-简单实例「建议收藏」正则表达式提取响应数据中的Token步骤1:TestPlan下创建线程组,线程组下创建取样器->HTTP请求。上图中Login接口的Response中有用户token,该token需要在下一个需求提报的接口中使用,所以在Login下添加“正则表达式提取器”步骤2:选择Login,鼠标右键选择“添加->后置处理器->正则表达式提取器”步骤3:正则表达式…

    2022年9月4日
  • 《深入解析IPv6(第3版)》——第10章 IPv6路由选择10.1 IPv6中的路由选择

    《深入解析IPv6(第3版)》——第10章 IPv6路由选择10.1 IPv6中的路由选择

    2022年3月2日
  • 配置rsyslog到logstash_配置rsyslog「建议收藏」

    配置rsyslog到logstash_配置rsyslog「建议收藏」什么是日志文件系统?记录系统在什么时候由哪个进程做了什么行为时,发生了何种的事件等。centos提供rsyslogd这个服务来统一管理日志文件。rsyslog的配置文件/etc/rsyslog.conf,此文件规定了什么服务的什么等级信息以及需要被记录在哪里。1.服务名称authpriv与认证有关的机制cron列行性工作调度daemon与各个daemon有关kern与内核…

    2022年9月24日
  • matlab语法 axis on,matlabaxis

    matlab语法 axis on,matlabaxis编程语言中文网今天精心准备的是《matlabaxis》,下面是详解!Matlab里axis这个函数怎么用,举个例子!axis函数可以用于操作普通的坐标属性(轴的缩放和外观)。比如:axis([xminxmaxyminymax]):可以设置当前坐标轴x轴和y轴的限制范围axis([xminxmaxyminymaxzminzmaxcmincmax])可以设置x,y…

    2022年6月13日
  • ATA考试该注意什么[通俗易懂]

    ATA考试该注意什么[通俗易懂]一、考试前将所有计算机除掉还原卡及还原软件。二、officeXp安装要用完全安装。三、服务器端尽量不要刷新所有客户端否则引起考试管理系统死机。四、拍照功能无法使用,可重新启动考试管理系统。五、服务器端无法扫描到客户端,除了服务器与客户端必须在同一网段内,可看一下客户端是否启动llistening…

    2022年7月13日
  • android离线打包[通俗易懂]

    android离线打包[通俗易懂]本文章参考官网和其他博客,如有侵权,立即删除官网地址:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android需要的工具HBuilderX链接:https://www.dcloud.io/hbuilderx.htmlAndroidStudio链接:https://developer.android.google.cn/studio/index.htmlApp离线SDK链接:https://nativesupp…

    2022年10月31日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号