Ionic read images from assets folder

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”>

BestOption

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

Filesystem plugin can’t be used for reading from the assets.
But assets files are directly accessible without any plugin, use a relative url instead of a filesystem url.
./assets/cats/101.jpg or http://localhost/assets/cats/101.jpg should both work

ok thanks now i understand filesystem does not fit here. then how i can do below things

i do not want to give static image path. Bcoz images will be uploaded dynamically and will have unique name everytime.
i am new to ionic how i can search any particular image from assets/cats folder for example user want to display image 103.jpg once and then next time want to display image 101.jpg, whatever he enter in textbox that image will be displayed.