How to access image from absolute path

Ionic Native
1

Hey,

I want to display an image inside an img tag.
The path is the following (on Android):
/data/user/0/com.devtest/cache/testapp_temp_dir/618090c8-ad98-45c6-bc6a-6e4027be260e3231835167563319924.jpg

What is the correct way of accessing this file? (I’ve tried to just put this path into an img tag’s src attribute, doesn’t work)
It has to work on iOS too.

Later I might need to save it to persistent storage, how do I do that?

2

hi, @Atee134
I think you need to use this image in your app at many places so, what you can do is create one folder in your app called asset inside that folder you need to create one folder image and put all the images which are going to use in the app. and that’s it in the img tag’s src you need to give the path

"asset/img/(your image name)"
ex:
"asset/img/618090c8-ad98-45c6-bc6a-6e4027be260e3231835167563319924.jpg"
and it will work on both the platform Android and IOS too.

3

This is an image that the app takes during runtime using a cordova plugin, so I can not add this to assets folder.

I figured it out.

import { SafeUrl, DomSanitizer } from ‘@angular/platform-browser’;
import { Base64 } from ‘@ionic-native/base64/ngx’;

this.base64.encodeFile(imagePath).then((base64File: string) => {
this.image = this.domSanitizer.bypassSecurityTrustUrl(base64File);
}

It doesn’t work on iOS though…

4

I am also trying this in my website here how to do it.

5

make a var for your image path like:
bannersPath:string = ‘http://www.domainname.com/apps/banners/img-0’;
check if any error came from server to hold any other images instead:
this.bannersPath == null || this.bannersPath == ‘NAN’ ? ‘…/assets/imgs/banners/’ : this.bannersPath;
if you’ll load it every time, make a new var like:
date:any = moment();
…
on the html page …
::: slide tag
ion-slide *ngFor=“let number of [1,2,3,4]”
::: img tag
img src = “{{bannersPath + number}}.jpg?{{ date }}”