角 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";
    }
}

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

ng build --prod

我收到错误：

无法绑定到“loading”，因为它不是“img”的已知属性。

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

如何在产品构建中排除此验证/限制？

例如，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