I can't preview that choose image

Question

I have a cart modal where the user can upload their images. Before I upload the image, I show the image to user. When the user wants to change the image, they click the close button and I make the src of the image element null but when the user uploads another image I can't show the preview. When I log the image element to console I see the src of the image but when I look the elements fields I can't see any src in the img element and I can't show the image to the user.

Can you help me?

Thanks in advance.

I use FileReader to upload image.

My Code:

if (file.files && file.files[0]) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
            
            var image = document.querySelector('img#img-thumb-review-530');
            
            image.src = e.target.result;
            console.log(image);
        }

        reader.readAsDataURL(file.files[0]);
    }

Answer 1

Try this, may help you:

Use below code in ts file.

 userImage: any;
    uploadFileToServer(files: FileList) {
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = (_event) => {
          this.userImage = reader.result;
        }  
    }

In HTML use below one. uploadFileToServer($event.target.files) call in (change) event in html input type=file.

<img [src]="userImage" >

You can add required class as your wish.