我的链接预加载器出现无效 href 值的错误

Question

我的 HTML 文件中有此图像，但出现以下错误

<link rel=preload> has an invalid href value

  <link rel="preload" fetchpriority="high" href={{mainImageUrl1024()}} as="image" media="(min-width:1024px)" />
  <link rel="preload" fetchpriority="high" href={{mainImageUrl768()}} as="image" media="(min-width:768px)" />
  <link rel="preload" fetchpriority="high" href={{mainImageUrl()}} as="image" />

以及如何加载此 href 值：

mainImageUrl(): string {
   return this.baseUrl + '?w=450&h=200&fit=crop&auto=format';
}

Answer 1

您在

href

属性中使用 Angular 的插值语法 {{ ... }}，Angular 会在页面加载时尝试解析该语法，从而导致问题。

要解决此问题，您可以使用 Angular 的属性绑定语法

href

而不是插值来动态设置

[attr.href]

属性。

以下是修改代码的方法：

<link rel="preload" fetchpriority="high" [attr.href]="mainImageUrl1024()" as="image" media="(min-width:1024px)" />
<link rel="preload" fetchpriority="high" [attr.href]="mainImageUrl768()" as="image" media="(min-width:768px)" />
<link rel="preload" fetchpriority="high" [attr.href]="mainImageUrl()" as="image" />

希望这能解决一切！