Issue
In Angular 17, I use
<img [ngSrc]="profilePicture" fill="" priority="" alt="Profile Picture">
In browser (Google Chrome), I get this warning:
NG02964: The NgOptimizedImage directive (activated on an element with the
ngSrc="http://localhost:4200/assets/uploads/me.jpg"
) has detected that this image is the Largest Contentful Paint (LCP) element and has had its "ngSrc" attribute modified. This can cause slower loading performance. It is recommended not to modify the "ngSrc" property on any image which could be the LCP element.
What does it mean not to "modify" the "ngSrc" property? profilePicture
is not a static string, so it has to be modified.
This is how it is defined:
profilePicture: string = '/';
Based on the business logic, this property gets changed by different methods in the same component.
If I use [src]
instead of [ngSrc]
, I get the warning "Use ngSrc (NgOptimizedImage directive) to improve performance"
So how can I avoid this warning(s)?
Solution
profilePicture: string = '/';
This is not an image. Use the following instead:
profilePicture?: string;
As long as profilePicture
is null, [ngSrc]
will not accept it and you will probably get an error. To avoid this error, use the img
tag only, when profilePicture
is set.
Like this:
<img *ngIf="profilePicture" [ngSrc]="profilePicture" fill="" priority="" alt="Profile Picture">
Answered By - Reza Saadati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.