Vista previa de la imagen de visualización angular 8 en ejemplo de código html

Nuestros programadores estrellas agotaron sus reservas de café, en su búsqueda diariamente por la resolución, hasta que Elisa encontró la contestación en GitHub así que hoy la compartimos con nosotros.

Ejemplo 1: imagen de vista previa en angular 8

<form [formGroup]="uploadForm"(ngSubmit)="submit()"><!--SelectFile--><input type="file" accept="image/*"(change)="showPreview($event)"/><!--ImagePreview--><div class="imagePreview"*ngIf="imageURL && imageURL !== ''"><img [src]="imageURL"[alt]="uploadForm.value.name"></div><!--AssignImageAlt--><input formControlName="name" placeholder="Enter name"><button type="submit">Submit</button></form>

Ejemplo 2: imagen de vista previa en angular 8

importComponent,OnInitfrom'@angular/core';importFormBuilder,FormGroupfrom"@angular/forms";

@Component(
  selector:'app-file-upload',
  templateUrl:'./file-upload.component.html',
  styleUrls:['./file-upload.component.css'])exportclassFileUploadComponentimplementsOnInit
  imageURL: string;
  uploadForm:FormGroup;constructor(public fb:FormBuilder)// Reactive Formthis.uploadForm=this.fb.group(
      avatar:[null],
      name:[''])ngOnInit():void// Image PreviewshowPreview(event)const file =(event.targetasHTMLInputElement).files[0];this.uploadForm.patchValue(
      avatar: file
    );this.uploadForm.get('avatar').updateValueAndValidity()// File Previewconst reader =newFileReader();
    reader.onload=()=>this.imageURL= reader.resultas string;
    reader.readAsDataURL(file)// Submit Formsubmit()console.log(this.uploadForm.value)

Tienes la posibilidad difundir este artículo si te fue de ayuda.

---

---

Utiliza Nuestro Buscador