Hi Everyone
i am trying to read images from assets/cats folder but i am unable to read and display images. My code is as below
<ion-header [translucent]=“true”>
</ion-title>
<ion-content [fullscreen]=“true”>
import { Component, OnInit } from ‘@angular/core’;
import { Filesystem, Directory, FileInfo } from ‘@capacitor/filesystem’;
import { HttpClient } from ‘@angular/common/http’;
import { LoadingController, Platform, ToastController } from ‘@ionic/angular’;
const IMAGE_DIR = ‘assets/cats’;
interface LocalFile {
name: string;
path: string;
data: string;
}
@Component({
selector: ‘app-tab2’,
templateUrl: ‘tab2.page.html’,
styleUrls: [‘tab2.page.scss’]
})
export class Tab2Page implements OnInit {
images: LocalFile = ;
constructor(
private plt: Platform,
//private http: HttpClient,
private loadingCtrl: LoadingController,
private toastCtrl: ToastController
) {}
async ngOnInit() {
this.loadFiles();
}
async loadFiles() {
this.images = [];
const loading = await this.loadingCtrl.create({
message: 'Loading data...'
});
await loading.present();
Filesystem.readdir({
path: IMAGE_DIR,
directory: Directory.Data
})
.then(
(result:any) => {
this.loadFileData(result.files);
},
async (err) => {
// Folder does not yet exists!
await Filesystem.mkdir({
path: IMAGE_DIR,
directory: Directory.Data
});
}
)
.then((_) => {
loading.dismiss();
});
}
// Get the actual base64 data of an image
// base on the name of the file
async loadFileData(fileNames: string[]) {
for (let f of fileNames) {
const filePath = `${IMAGE_DIR}/${f}`;
const readFile = await Filesystem.readFile({
path: filePath,
directory: Directory.Data
});
this.images.push({
name: f,
path: filePath,
data: `data:image/jpeg;base64,${readFile.data}`
});
}
}
async selectImage() {
// TODO
}
async startUpload(file: LocalFile) {
// TODO
}
async deleteImage(file: LocalFile) {
// TODO
}
}
pls help to solve the issue