Is there a way to detect if background image loaded properly or not in angular?

[fahadsubzwari924]

I have an Angular7 app in which I am displaying a div background image. But sometimes link is broken.

My image is bound in my HTML like this

 `<div [ngStyle]="{'background-image': 'url(' + row?.coverUrl + ')', 'background-size': 'cover', 
  'background-position' : 'center'}" class="img-area cursor-pointer" 
  (click)="navigateToCOmpany(row)" *ngIf="row.coverUrl !== ''">
  </div>`

The problem is that sometimes row?.coverUrl is broken link. So how can I detect that link is broken so that I can bind a default image?

[ericmartinezr]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

you could make an HTTP request to coverUrl to see if you get a 404 or similar

[sacgrover]

@fahadsubzwari924 You can add multiple url() in that property comma separated. If first doesn't work then 2nd will work with default. Please post such type of questions on stack overflow as mentioned in above comments and close this one.

<div [ngStyle]="{'background-image': 'url(' + row?.coverUrl + '),url(' + defaultUrl + ')', 'background-size': 'cover', 
  'background-position' : 'center'}" class="img-area cursor-pointer" 
  (click)="navigateToCOmpany(row)" *ngIf="row.coverUrl !== ''">
  </div>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}