我有一个Ionic 3应用程序，我正在从API服务器加载一些图像。在客户端中，我想知道图像是否已成功获取或加载，还想知道获取时是否有任何错误。
这是我使用纯html创建的带有角度模板的示例，没有任何js。
<img hidden [src]="driverInfo?.user_avatar?.url | image:'original'" (load)="this.loadingImage = false">
<img [src]="driverInfo?.user_avatar?.url | image:'original'" *ngIf="!loadingImage" onError="this.src='assets/imgs/avatar-placeholder.png';" />
当我只使用下面的第二行代码并将(加载(事件转移到那里时。 路径所以我知道这个代码一点都不好。这就是为什么我要解决这个问题。我只是创建了一个变通代码，它实现了我的目标，但不是一个好的实践。 所以在代码的第一行。我显示了一个隐藏的html文件。此代码的目的仅是在加载图像时触发，如果成功获取，则第二行是实际图像的显示位置，否则显示一些错误或图像占位符。 那么，如何使用Angular JS重构它呢？我会使用ViewChild和ElementRef来实现这一点吗？ 如果有人能帮忙，我将不胜感激。提前谢谢。onError路径首先显示，这并不是因为图像仍在加载。我想在加载图像时显示一个微调器或加载程序。然后，当图像加载后，如果成功，则显示原始路径如果未在onError中显示
我认为使用以下构造可以实现您想要的东西：
<img #thisImage src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" failedUrl="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" (error)="missingImage(thisImage.attributes.failedUrl.value)" onerror="this.src='https://via.placeholder.com/150'"/>
这里有stackblitz可以玩：https://stackblitz.com/edit/ionic-szz3nc
简而言之：
如果您想分配与"src"的原始值重复的附加属性，我使用了"failedUrl"。这是因为出现错误时，src将被替换为占位符安全url。
现在oneror-你想用占位符替换失败的url
使用(error(绑定，您可以调用一个方法，并将所需的任何内容传递给ts函数以进一步操作(就像我过去"报告"此类丢失的图像一样(。
如果这有帮助，请告诉我。
请注意，这种类型的代码风险极高，因为如果你犯了错误，这可能会导致错误循环(比如你的安全占位符url也不指向任何地方(。
除了前面的答案之外，"oneror；属性应该可以工作，fot.svg图像除外，所以请确保您没有将svg用于默认图像。
svg图像在"；oneror；属性将在浏览器上工作，但不能使用cordova进行构建。