解决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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SpringBoot源码学习(更新中)

    SpringBoot源码学习(更新中)SpringBoot源码学习(更新中)

    2022年6月11日
    20
  • 【Code皮皮虾】带你盘点双亲委派机制【原理、优缺点】,以及如何打破它?[通俗易懂]

    文章目录????前言什么是双亲委派机制?双亲委派机制原理优点缺点打破双亲委派机制?前提知识:线程上下文类加载器双亲委派出现之前JDBC打破双亲委派机制Tomcat如何打破双亲委派机制?1.自定义类加载器2.使用线程上下文类加载器????福利????Java入门到就业学习路线规划????小白快速入门Python爬虫路线????前言Code皮皮虾一个沙雕而又有趣的憨憨少年,和大多数小伙伴们一样喜欢听歌、游戏,当然除此之外还有写作的兴趣,emm…,日子还很长,让我们一起加油努力叭???????

    2022年4月6日
    132
  • mongodb与MySQL的不同_Mongodb与MySQL之间的比较分析

    mongodb与MySQL的不同_Mongodb与MySQL之间的比较分析本篇文章给大家带来的内容是关于Mongodb与MySQL之间的比较分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。在数据库存放的数据中,有一种特殊的键值叫做主键,它用于惟一地标识表中的某一条记录。也就是说,一个表不能有多个主键,并且主键不能为空值。无论是MongoDB还是MySQL,都存在着主键的定义。对于MongoDB来说,其主键名叫”_id”,在生成数据的时候,如果用户不主…

    2022年6月16日
    25
  • Folium_个人基础信息介绍

    Folium_个人基础信息介绍folium基础内容介绍1.简介​ folium是js上著名的地理信息可视化库leafet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaflet的相关功能,基于内建的osm或自行获取的osm资源和地图原件进行地理信息内容的可视化,以及制作优美的可交互地图,是通过不断添加图层元素来定义一个Map对象,最后以几种方式将Map对象展现出来。​ 而在Map对象的生成形式上,可以在定义所有的图层内容之后,将其保存为html文件在浏览器中独立显示,也可以基于j

    2025年7月3日
    2
  • Python的使用方法「建议收藏」

    Python的使用方法「建议收藏」1安装turtlePython2安装命令:Python3安装命令:因为turtle库主要是在Python2中使用的,所以安装的时候可能会提示错误:Command"pythons

    2022年7月6日
    26
  • html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法

    html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法一、flex-direction:(元素排列方向)※flex-direction:row(横向从左到右排列==左对齐)※flex-direction:row-reverse(与row相反)※flex-direction:column(从上往下排列==顶对齐)※flex-direction:column-reverse(与column相反)二、flex-wrap:(内容一行容…

    2022年5月7日
    40

发表回复

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

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