Angular 9 |无法绑定到 'loading'，因为它不是 'img' 的已知属性

Question

我正在使用 Angular 9 并且我很简单地尝试将 img 元素的属性 "loading" 绑定到 Angular 属性。如果我运行应用程序处于开发模式而不是生产模式，则此方法有效。

在我的模板中我有这个：

<img [src]="image" [loading]="loading" [alt]="title">

在组件中我有这个：

import { Component, OnInit, Input } from '@angular/core';

@Component(
{
    selector: 'image-card',
    templateUrl: './image-card.component.html',
    styleUrls: ['./image-card.component.scss'],
})
export class ImageCardComponent implements OnInit
{
    @Input() loading:"lazy" | "eager" = "lazy";
    @Input() title:string;
    @Input() image?:string;

    constructor() { }

    ngOnInit() 
    {
        this.image = this.image || "assets/images/default_image.jpg";
    }
}

这是开发 build/ng 服务，但如果我运行产品构建：

ng build --prod

我收到错误：

Can't bind to 'loading' since it isn't a known property of 'img'.

属性存在，https://caniuse.com/#search=loading 为什么我收到错误？

如何在产品构建中排除此 validation/restriction？

例如，alt 绑定工作正常，没有错误。

编辑：包括更好的代码示例。

Answer 1

图像的 loading 属性非常新，尚未被所有浏览器支持，Angular 也不支持。因此，您应该尝试使用 [attr.loading]="loading" 语法，直到 Angular 将其视为本机 HTML 属性。

Angular源代码中的相关行：https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L119

Angular 9 |无法绑定到 'loading'，因为它不是 'img' 的已知 属性

Angular 9 | Can't bind to 'loading' since it isn't a known property of 'img'

bind

image

loading

angular

Angular 9 |无法绑定到 'loading'，因为它不是 'img' 的已知属性