CODEWITHSUNDEEP
typescriptionic-frameworkcordova-pluginsionic3cordova-plugin-file
askilondz
askilondz

Reputation: 3294

Unable to set img src from cordova file in Ionic

I'm using cordova-plugin-file-transfer and cordova-plugin-file to download user avatars and display them locally in the app. I'm successfully fetching the images and storing them in file.dataDirectory according to: https://ionicframework.com/docs/native/file-transfer/ . When I check the file in the directory it says it exists...however when I try to set the absolute path of the file to an <img> tag I see nothing. I'm pulling in the path dynamically but even when I hardcode it...nothing.

Code for saving, loading avatars:

saveAvatar()
{
    var downloadUrl = this.user.avatar + "?type=small&sz=75";

    console.log("Downloading Avatar from: " + downloadUrl);
    console.log("Storing file to: " + this.file.dataDirectory + this.user.id + '/avatar.jpg');


    this.fileTransfer.download(downloadUrl, this.file.dataDirectory + this.user.id + '/avatar.jpg')
    .then((entry) => {
        console.log('~~~~~ download complete: ' + entry.toURL());
    }, (error) => {
        console.log('Unable to download avatar: ' + error);
    });
}

loadAvatar()
{
    var userDir = this.file.dataDirectory + this.user.id;
    var fileName = 'avatar.jpg';

    this.file.resolveDirectoryUrl(userDir)
    .then((directoryEntry: DirectoryEntry) => {
        console.log("Dir Resolved: " + directoryEntry.isDirectory);

        this.file.getFile(directoryEntry, fileName, { create: false })
        .then(file => {
            console.log("File Found: " + file.toURL());
            this.avatars[this.user.id] = file.toURL();
        })
        .catch(err => console.log('Unable to load avatar: ' + err));
    })
    .catch(err => console.log('Unable to Resolve Directory Entry: ' + JSON.stringify(err)));
}

The absolute paths of the stored images are as such:

file:///data/user/0/package_name_here/files/1/avatar.jpg

or when trying on external storage:

file:///storage/emulated/0/Android/package_name_here/files/1/avatar.jpg

Any helps is much appreciated!

Upvotes: 1

Views: 863

Answers (1)

askilondz
askilondz

Reputation: 3294

Figured out the problem. Though I was running on an android device, I was running it live in ionic which doesn't work with all cordova plugins. So instead of doing ionic cordova run android -l -c I just have to run it as ionic cordova android.

Upvotes: 2

Related Questions