Goal:加载带有动态源的图像.如果找不到图像,则加载占位符图像.

这应该说明我正在try 做什么,但我不知道如何根据前img src是否有效有条件地设置validImage.

<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="...">
<img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="...">

如果src="./app/assets/images/{{image.ID}}.jpg"返回图像,则validImage应为true.否则,它将返回false,并且应该只显示第二个img标记.

有一些明显的解决方法,比如存储所有有效图像源的列表,但我认为有更好的方法来实现这一点.

如果您能就如何在Angular2实现这一点提出任何建议,我们将不胜感激.

推荐答案

处理断开图像链接的最佳方法是对<img>标记使用onError事件:

<img  class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg"
      onerror="this.src='./app/assets/images/placeholder.jpg';"  alt="..." />

Angular相关问答推荐

使用路由进行测试.为每次测试导航堆栈

在forkjoin中使用NGXS状态数据

Angular Signal只指一种类型,但这里用作值.ts(2693)''

从、管道和映射可观察到的逻辑?

Sass-Loader中出现分号错误:ANGLE应用程序的缩进语法中不允许使用分号

成Angular 的嵌套router-outlet

如何使用独立组件在ANGLE(16+)中实现嵌套布线

如何在Primeng中实现自定义排序

带区域设置用法的Angular 日期管道

P-DropDown不会使用react 式表单手动设置Value

获取 Angular 中所有子集合 firestore 的列表

Angular Http 拦截器 - 修改标头会导致 CORS

刷新页面导致 401 错误-Angular 8

无法获得 angular-material md-sidenav 的 100% 高度

读取文件并解析其内容

Angular 2 可用的 yeoman 生成器

Firestore 从集合中获取文档 ID

如何从materialAngular使用分页器?

Angular 2 中的动态模板 URL

在 Angular 2 中对 observable 进行单元测试