-1

I have a file input where images are uploaded and I want to preview them in a image tag, but the value of the input has a fake path, have any idea how to make this work?

here is my ts code

evidenceChange() {
    var evidence = document.getElementById('evidence') as HTMLInputElement | null;
    if (evidence) {
      var img = evidence.value;
      if (img != null && img != '') {
        var a = document.getElementById('evidenceImg') as HTMLInputElement | null;
        if (a)
          a.src = img;
      } else {
        var imgEv = document.getElementById('evidenceImg') as HTMLInputElement | null;
        var imgAux= document.getElementById('imgAux') as HTMLInputElement | null;
        if (imgEv){
          if(imgAux)
          imgEv.src = imgAux.src ;
        }
      }

    }

  }

Here is my HTML code:

<img id="evidenceImg" (click)="evidenceUpload()" class="imgEvidence" src="/assets/resources/foto/Recurso_25@3x.png">
    
<input (change)="evidenceChange()" style="display: none;" type="file" id="evidence" accept="image/png, image/jpeg">
Edy
  • 149
  • 7
  • 1
    Not sure what you mean by a fake path, and without a reproducible example a quick suggestion would be just do [something like this](https://stackoverflow.com/questions/16500848/how-to-generate-a-thumbnail-image-after-adding-an-image-inside-an-input-type-fi) – Chris W. Oct 20 '22 at 18:29

1 Answers1

0

To set the src of an img tag to a file selected in a file input you have to take the File from the files list and create an object url from it and set it to the src of the img.

URL.createObjectUrl

Musa
  • 96,336
  • 17
  • 118
  • 137