直到 src img 加载了 angular - Javascript

在开发 web 应用程序时，经常需要加载图像以显示给用户。在 Angular 和 JavaScript 中，有多种方式可以完成这个任务。本文将重点介绍如何检测图像在加载过程中的状态，以及如何在加载完成后执行相应的操作。

监听图像加载状态

要监听图像加载状态，可以使用 load 和 error 事件。代码如下：

let img = document.createElement('img');
img.src = 'path/to/image.jpg';

img.addEventListener('load', function() {
  console.log('Image has loaded.');
});

img.addEventListener('error', function() {
  console.log('Image failed to load.');
});

上面的代码创建了一个新的 img 元素，并设置其 src 属性。然后，它通过添加 load 和 error 事件监听器来检测图像加载的情况。当图像成功加载时，load 事件将被触发。而当图像加载失败时，error 事件将被触发。

在 Angular 应用程序中加载图像

在 Angular 应用程序中加载图像时，可以使用 ng-src 指令来设置图像的源。代码如下：

<img ng-src="{{imagePath}}" alt="My Image">

上面的代码使用 ng-src 指令来设置图像的源。注意，这里使用的是双括号语法，这是 Angular 模板语法的一部分。这里的 imagePath 变量是从组件中获取的图像路径。

要监听图像加载状态，可以使用 onload 和 onerror 事件。代码如下：

<img ng-src="{{imagePath}}" alt="My Image" onload="onImageLoad()" onerror="onImageError()">

上面的代码在图像元素中添加了 onload 和 onerror 事件。这些事件将在图像加载完成或加载失败时触发。需要在组件中定义这些事件处理程序：

onImageLoad() {
  console.log('Image has loaded.');
}

onImageError() {
  console.log('Image failed to load.');
}

结论

加载图像是常见的任务，但在加载图像时处理错误和加载状态却并不容易。通过使用 load 和 error 事件或 Angular 的 ng-src 指令以及相应的事件处理程序，开发人员可以确保图像在加载完成或加载失败时正确地进行处理。