Angular Ionic 3 如何知道图像是否已加载以及在获取图像 url 路径时是否有任何错误

Question

我有一个Ionic 3 应用程序，我正在从API 服务器加载一些图像。 在客户端，我想知道图像是否被成功获取或加载，我还想知道获取时是否有任何错误。

这是我使用纯html 和 angular 模板创建的示例，没有任何 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';" />

当我只使用下面的第二行代码并在那里传输（加载）事件时。 onError路径首先显示，这不是因为图像仍在加载。 我想在加载图像时显示微调器或加载器。 然后当图像加载时显示原始路径，如果成功，则在onError 中不显示路径。

所以我知道这段代码一点都不好。 这就是为什么我试图在这里解决。 我刚刚创建了一个解决方法代码，它实现了我的目标，但不是一个好的做法。

所以在代码的第一行。 我显示了一个隐藏的html 文件。 这段代码的目的只是在图像被加载时触发，第二行是实际图像的显示位置，如果它成功获取，或者如果没有，则显示一些错误或图像占位符。

那么如何使用Angular JS重构它呢？ 我会使用ViewChild和ElementRef来实现这一点吗？

感谢有人可以提供帮助。 提前致谢。

Answer 1

我认为您可以使用以下结构实现您想要的东西：

<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

简而言之：

1. 您想分配将复制“src”原始值的附加属性，因此我使用了“failedUrl”。 这是因为在错误时 src 将被替换为您的占位符安全 url。

2. 现在 onerror - 你想用占位符替换失败的 url

3. 使用（错误）绑定，您可以调用一个方法并将您需要的任何内容传递给 ts 函数以进一步执行操作（就像我曾经“报告”此类丢失的图像一样）。

让我知道这是否有帮助。

请注意，这种类型的代码非常危险，因为如果您犯了错误，这可能会导致错误循环（就像您的安全占位符 url 也没有指向任何地方）。

Answer 2

除了之前的答案之外，“onerror”属性应该可以工作，但 fot .svg 图像除外，因此请确保您没有将 svg 用于默认图像。

"onerror" 属性上的 svg 图像将在浏览器上工作，但不能使用cordova 构建。