Image preview before upload in angular 5

Question

.html

Answer 1

I am using the below code to implement the image preview:

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

Which works just fine and displays the image preview. The problem I originally faced was that I receeived the below error in the chrome developer tools each time an image preview is generated:

Everything worked fine though, there are no other errors.

If I clicked on the null:1 I was directed to the below:

After some fiddling and troubleshooting, I was able to find the solution which I have included in the edit below.

EDIT: Figured it out. I didn't have the || 'http://placehold.it/180'" included in the [src]=" on my component.html. Guess its a timing issue. Sorted now. no more error.