Q:

(Angular 8) Validade image src for a dynamic background-image

I implemented dynamic background-image using angular. This is how I did it:
<div [style.height.px]="coverHeight" [style.background-image]="'url(' + coverImage + ')'" class="card mb-3">
</div>

I did this, because it is a way for resizing images without distortion. That's working fine. 
But, below this, there is an input, and every time the (change) function is called, I want the image on the div to update.
So I have a default image, and when my user puts something like https://s.imgur.com/images/logo-1200-630.jpg?2 in the input, the image will show there. That's been easy, as you can see, the background-image is dynamic. But I want to validate if the link exists, if not, the default image will stay there.
So I tried a few things, such as:
Check if image exists on server using JavaScript? 
Checking if image does exists using javascript 
see if src of img exists
But neither of them works for me the way I need it. 
What I need is a function that returns me true if the image exists.
What problems I encountered:
When trying to use  new XMLHttpRequest();, I'm getting CORS error from some domains, such as IMGUR.
When trying to use var img = new Image(); and then capturing onerror, it works somewhat, but I still can't return a Boolean, because the onerror function does not return anything of use, the only thing I can get is an alert when the image is invalid.
Trying <div onerror="doSomething()"> does not work either, the function is not called (probably because it is a div, and not an img tag).
The closest I got, is when using 
var img = new Image();
img.src = url;

Because that will actually generate an error in the browser's console when the image is invalid. The error is a (not found) GET. But when I tried to try ... catch it, it seems it never counts it as an exception, so it will always go into try.
Also, trying things such as checking the image's width doesn't work either, and I don't really know why. Also, I don't want to use the DOM for this, and this function should be very simple, check the image, return true or false.
This should be easy, but I'm having a hard time... Any ideas?

A:

With images you have access to events like onload an onError. You can utilize these two for your purpose. At the end I have presented a StackBlitz, but be sure when you test it, Stackblitz only work with https urls.
So when the user inputs something in the input you call a function, yes? That function could then look like:
changeBackground() {
  let img = new Image();
  // imgUrl is the property containing what user has typed in input
  img.src = this.imgUrl;
  img.onload = () => {
    this.coverImage = img.src;
  }
  img.onerror = () => {
    console.log('failed')
  }
}

StackBlitz

