angular - 如何检查来自url的图像是否损坏
问题描述
我正在从事 ionic 4 项目。我的项目正在从 url 获取数据 json。我想检查来自 url 的图像是否损坏。如果是坏的显示另一个图像。我尝试了不同的代码,但没有人在工作。
我正在使用的代码是
<ion-row *ngFor="let item of items" justify-content-around test-center>
<ion-col >
<img src="/images/data/operators/{{item.flight.airline.code.icao}}_logo0.png" onerror="this.src='images/data/operators/{{item.flight.airline.code.iata}}_{{item.flight.airline.code.icao}}.png'">
</ion-col>
</ion-row>
我在运行时出错
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Binding to event property 'onerror' is disallowed for security reasons, please use (error)=...
If 'onerror' is a directive input, make sure the directive is imported by the current module.
取决于错误如果我使用(error)=
我得到另一个错误是
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 69 in [this.src=
请问有什么解决办法吗?
解决方案
(error) 捕获由 img 触发的错误事件。使用类似的东西:
<img src="..." (error)="handleImgError($event, item)">
在您的组件中创建函数 handleImgError()
function handleImgError(ev: any, item : any){
let source = ev.srcElement;
let imgSrc = `images/data/operators/${item.flight.airline.code.iata}_${item.flight.airline.code.icao}.png`;
source.src = imgSrc;
}
推荐阅读
- python - 比较具有多个索引的两个列表
- algorithm - 具有分配的恒定时间复杂度
- javascript - 如何在存在时使用数组值构建消息字符串
- javascript - 如何发布我的 vue npm 库以同时支持 Vue 2 和 Vue 3,
- java - 对我的括号的改进,重新对齐 Java 代码
- bitbucket - 在我的 Maven 包上运行 jgitflow start 时出现异常(org.eclipse.jgit.api.errors.TransportException)
- python - 有没有办法在同一轴上绘制多个累积直方图,其中数据集被标准化
- java - 将 CharArray 中某个字符后的八个字符添加到字符串
- javascript - 在 Node 中调用具有命名空间的 .dll 库的正确方法是什么?
- java - Java 声音采样器未完成获取缓冲区