Juan C Felizzola
Nathaly Stefani Riaño Bejarano
Alexander Sandoval
Pedro Roberto Capriles Morales
Carlos Uriel de Jesus Sánchez González
Juan Guillermo Perez Cardozo
Fabian Bohorquez
Diego Forero
Fabian Bohorquez
Para agregar una imagen como avatar y en los detalles usé Lorem Pixel para generar imagenes aleatorias. Hice lo siguiente:
En home.html en <ion-item> agregué:
<ion-item (click)="irAVistaDeDetalleExistente(lugar)"> <ion-avatar item-start> <img src="http://lorempixel.com/350/230/"> </ion-avatar> <h2>{{ lugar.nombre }}</h2> <h3>{{ lugar.direccion }}</h3> <p>{{ lugar.categoria }}</p> </ion-item>
Y en lugar.html en <ion-list> agregué:
<ion-card> <img src="http://lorempixel.com/350/230/"/> </ion-card>
Genial! No funcionó con lorempixel, así que utilicé pleceimg
home.html
<ion-avatar item-start> <img src="https://placeimg.com/350/230/arch"> </ion-avatar>
lugar.html
<ion-card> <img src="https://placeimg.com/350/230/arch"/> </ion-card>
Creo que es por el https. Me pasó lo mismo que a @NathaRB.
Metodo donde cargamos la imagen
uploadPhoto($event):void{ this.file = $event.target.files[0]; Functions.getBase64(this.file).then((result)=>{ console.log(result); this.lugar.imagen= result; return result; }); }
HTML del formulario desde donde cargaremos la imagen.
<ion-item> <ion-label fixed>Imagen</ion-label> <ion-avatar item-end> <img *ngIf="lugar.imagen" src="{{lugar.imagen}}"> <img *ngIf="!lugar.imagen" src="../../assets/imgs/logo.png"> </ion-avatar> </ion-item> <ion-item> <ion-label stacked>Cargar Imagen</ion-label> <ion-input type="file" (change)="uploadPhoto($event)"></ion-input> </ion-item> <ion-item>
Resultado
La clase abstracta con el método usado para convertir la imagen a base 64 es el siguiente:
export abstract class Functions{ static getBase64(file:File) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } }
Es elemental ver el curso de angular
en ionic 4 no me salio funciono la confirmacion de la eliminacion. sera investigar
Lastima que no suban el contenido del codigo ?
Lo publicaremos pronto.
Muchas Gracias GOLLUM23 se que tu trabajo debe ser duro, pero lastimosamente me e fijado que no es el único curso que falta a;adir el código, pero bueno, son cosas que deben mejorar con la practica. como me gustaria que ustedes le compitieran, a las grandes ligas de la educación online.
