CODEWITHSUNDEEP
javascriptangular
LordGrim
LordGrim

Reputation: 751

About Previewing an Image in Angular

<img [src]="imageInput" alt="" width="100%">
<input type="file" (change)="onChange($event)" accept="image/*">

onChange(event: any) {
    this.imageInput = event.target.files[0];
    let reader = new FileReader();

    reader.onload = (e: any) => {
        this.imageInput = e.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
}

So here is my code in angular. My problem is that every time I will upload and preview an image. There's this "GET http://localhost:4200/[object%20File] 404 (Not Found)" that keeps on showing in my console log.

Upvotes: 0

Views: 283

Answers (2)

Mortadha FADHLAOUI
Mortadha FADHLAOUI

Reputation: 1

you just need to delete this line
this.imageInput = event.target.files[0];

Upvotes: 0

Mohsen Kamrani
Mohsen Kamrani

Reputation: 7457

Initially imageInput is null, so you can get rid of the message with an ngIf like this:

<img *ngIf="imageInput" [src]="imageInput" alt="" width="100%">

Check it here.

Upvotes: 1

Related Questions