Vista previa de la imagen antes de cargar en angular 5

Intenta interpretar el código de forma correcta previamente a aplicarlo a tu trabajo y si ttienes algo que aportar puedes compartirlo con nosotros.

Solución:

.html

Actualice el attr del evento y el parámetro del controlador para la entrada. Y deberías usar el enlace de datos para src attribute. A continuación se aplicará src si no lo es null o URL indefinida o codificada (‘http://placehold.it/180’)

.ts

En el archivo ts del componente (clase) debe tener la propiedad imageSrc que se usa en vista (html) y su función debe ser un método de esa clase

...
imageSrc: string;
...
constructor(...) ...
...
readURL(event: Event): void 
    if (event.target.files && event.target.files[0]) 
        const file = event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imageSrc = reader.result;

        reader.readAsDataURL(file);
    

Estoy usando el siguiente código para implementar la vista previa de la imagen:

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]);

Lo cual funciona bien y muestra la vista previa de la imagen. El problema que enfrenté originalmente fue que recibí el siguiente error en las herramientas de desarrollo de Chrome cada vez que se generaba una vista previa de la imagen:

Sin embargo, todo funcionó bien, no hay otros errores.

Si hago clic en el null:1 Fui dirigido a lo siguiente:

Después de un poco de manipulación y solución de problemas, pude encontrar la solución que he incluido en la edición a continuación.

EDITAR: Lo descubrí. no tenía el || ‘http://placehold.it/180′” incluido en el [src]=” en mi componente.html. Supongo que es un problema de tiempo. Ordenado ahora. No más errores.

Sé que llegué tarde, pero me encontré con este problema tanto para la imagen como para el audio. Las soluciones anteriores funcionaron bien para las imágenes, pero no tan bien para el audio. Eventualmente conseguí que todo funcionara usando un objeto URL en lugar del objeto FileReader que todos usan. algo como lo siguiente

archivo componente.ts ~

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) 
  if (event.target.files && event.target.files[0]) 
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  

Mi componente.html parece ~

Finalmente, creé una canalización personalizada para eliminar las advertencias de la consola. mi pipa es la siguiente~

@Pipe(
  name: 'sanitizerUrl'
)
export class SanitizerUrlPipe implements PipeTransform 

  constructor (
    private sanitize: DomSanitizer
  ) 

  transform(value: string): SafeUrl 
    return this.sanitize.bypassSecurityTrustUrl(value);
  

Para ver cómo usé esto para la etiqueta de audio, puede consultar este enlace. Son solo 2 líneas adicionales de código que se explica por sí mismo.

Calificaciones y comentarios

Recuerda que puedes comunicar esta crónica si te fue de ayuda.

---

---

Utiliza Nuestro Buscador