Question 374352 in Html Question posted in
Some basic documentation can be found here.

Html – Getting error of invalid href value for my link preloader

I have this image on my HTML file , but getting below error <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" />

and how I load this href values :

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    Maybe this warning is a bug

    [as]- this attribute is used when rel="preload" or rel="prefetch" has been set on the element. It specifies the type of content being loaded/prefetched Instead, 'preload' you can also use 'prefetch'

    <link rel="prefetch" >

    So we can accomplish the task


  2. 0

    You’re using Angular’s interpolation syntax {{ … }} within the href attributes, which Angular tries to resolve when the page loads, causing the issue.

    To fix this issue, you can dynamically set the href attributes using Angular’s property binding syntax [attr.href] instead of interpolation.

    Here’s how you can modify your code:

    <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" />

    Hope this resolves everything!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search