ionic4での画像の取り扱いについて

前提・実現したいこと

ionic4でカメラロールから取得した画像をローカルに保存し、画面にも表示できるようにしたい。

発生している問題・エラーメッセージ

ローカルに保存まではできるようになったが、画面に表示が上手くいかないです。

Base64に変換していないからなのでは？と思い、Ionic Native pluginsの「Base64」をインポートし、
下記のように変換できるか試してみたが、そもそもアプリが起動時（ios）にエラーとなり、
上手くいかず・・・

this.base64.encodeFile(filePath).then((base64File: string) => {
  console.log(base64File);
}, (err) => {
  console.log(err);
});

他の方法でBase64の変換ができるような方法が知りたいです。

また、そもそもBase64は関係ない場合はご指摘いただきたいです。

該当のソースコード

ionic
1
2<ion-header>
3  <ion-toolbar>
4    <ion-title>
5      Title
6    </ion-title>
7  </ion-toolbar>
8</ion-header>
9
10<ion-content>
11  <img [src]="image">
12  <ion-button (click)="takePhoto()">take photo</ion-button>
13</ion-content>
14

ionic
1
2takePhoto() {
3
4    // 〜省略〜 //
5
6    const { Camera, Filesystem } = Plugins;
7
8    let options = {
9      resultType: CameraResultType.Uri,
10      source: CameraSource.Photos
11    };
12
13    // ①カメラロールから画像を取得
14    const img = await Camera.getPhoto(options);
15
16    let contents = await Plugins.Filesystem.readFile({
17      path: img.path
18    });
19
20    // ②ローカルに書き込み
21    Plugins.Filesystem.writeFile({
22      data: contents.data,
23      path: "aaa.jpeg",
24      directory: FilesystemDirectory.Data
25    });
26
27    // ③ローカルに書いた画像のUri取得
28    let imageuri = await Filesystem.getUri({
29      directory: FilesystemDirectory.Data,
30      path: "aaa.jpeg"
31    });
32
33    this.image = imageuri.uri;
34}
35