Ionic photo gallery code not working

I am going over the photo gallery ionic app tutorial. I am at the part in which I am able to take photos, store them and when the page is refreshed, reload them. The problem is that when refreshing the page, the photo is not loaded. The picture blinks and goes away.

Here is the basic code

photo.service.ts

import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource, Photo} from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Storage } from '@capacitor/storage';
@Injectable({
  providedIn: 'root'
})
export class PhotoService {

  public photos: UserPhoto[] = [];
  private PHOTO_STORAGE: string = 'photo';
  constructor() { }
  
  private async savePicture(photo: Photo){
    const base64Data = await this.readAsBase64(photo);
    const fileName = new Date().getTime() + '.jpeg';
    const savedFile = await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Data
    });

    return{
      filepath: fileName,
      webviewPath: photo.webPath
    }
  }
  
  private async readAsBase64(photo: Photo){
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();

    return await this.convertBlobToBase64(blob) as string;
  }

  private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
    const reader = new FileReader;
    reader.onerror = reject;
    reader.onload = () => {
        resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });

  public async addNewToGallery(){
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });

    const savedImageFile = await this.savePicture(capturedPhoto);
    this.photos.unshift(savedImageFile);
    Storage.set({
      key: this.PHOTO_STORAGE,
      value: JSON.stringify(this.photos),
    });
  }

  public async loadSaved(){
    const photoList = await Storage.get({key: this.PHOTO_STORAGE});
    this.photos = JSON.parse(photoList.value) || [];
    
    for(let photo of this.photos){
       const readFile = await Filesystem.readFile({
          path: photo.filepath,
          directory: Directory.Data
       }); 
       photo.webviewPath = 'data:image/jpeg;base64, ${readFile.data}';
    }
  }
}

export interface UserPhoto {
  filepath: string;
  webviewPath: string;
}

tab2.page.ts:

import { Component } from '@angular/core';
import { PhotoService } from '../services/photo.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(public photoService: PhotoService) { }

  async ngOnInit(){
    await this.photoService.loadSaved();
  }

  addPhotoToGallery(){
    this.photoService.addNewToGallery();
  }

}

tab2.page.html:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Photo Gallery
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addPhotoToGallery()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <ion-grid>
     <ion-row>
       <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
          <ion-img [src]="photo.webviewPath"></ion-img>
       </ion-col>
     </ion-row>
  </ion-grid>
  <app-explore-container name="Tab 2 page"></app-explore-container>
</ion-content>

1 post - 1 participant

Read full topic