在Angular 5中,可以使用onerror
事件来检查背景图片是否失效,并使用默认图片替代。以下是一个示例代码:
onerror
事件处理函数:
imageUrl
变量和onImageError
函数:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
imageUrl = 'path_to_image.jpg';
onImageError(event) {
this.imageUrl = 'path_to_default_image.jpg';
}
}
当背景图片加载失败时,onImageError
函数会被调用,然后将imageUrl
变量设置为默认图片的路径。这将触发Angular的变更检测机制,使背景图片被替换为默认图片。