2
respostas

Foto quebrada

Estou com problema com a foto salva no perfil, o aplicativo tira a foto e a salva, mas quando vou ver a foto ela aparece "quebrada"

uma foto do problema:

https://i.pinimg.com/564x/cf/4e/32/cf4e3284e1b1e45c57ef4d91e94e1901.jpg

2 respostas

Oi Alexander, blz? eu não sou especialista em ionic, mas talvez seja um mero problema no src da imagem. Como que ta a declaração da imagem no seu html?

usuario-service.ts

public url: string;

guardaAvatar(url){
      localStorage.setItem(KEY, url);
    }
    obtemAvatar(){
      return localStorage.getItem(KEY);
    }

perfil.ts

ngOnInit(){
    this.url = this._service.obtemAvatar();
  }
tiraFoto(){
    this.camera.getPicture({
      destinationType: this.camera.DestinationType.DATA_URL,
      saveToPhotoAlbum: true,
      correctOrientation: true
    }).then(url => {
      this._service.guardaAvatar(url);
      this.url = url;
    }).catch(err => console.log(err));
  }

perfil.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Perfil
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>

    <ion-item>
      <ion-avatar item-left *ngIf="url">
        <img [src]="url">
      </ion-avatar>
      {{ usuarioLogado.nome }}
      <button ion-button outline item-right (click)="tiraFoto()">
        <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
      </button>
    </ion-item>

    <ion-item>
      <p>{{usuarioLogado.dataNascimento}}</p>
    </ion-item>
    <ion-item>
      <p>{{usuarioLogado.email}}L</p>
    </ion-item>
    <ion-item>
      <p>{{usuarioLogado.telefone}}</p>
    </ion-item>
  </ion-card>
</ion-content>