cordova: how to use an image from persistent storage as source for an img tag?

Question

I am able to loop through an api to get a list of 3 images. Each photo is downloaded and saved on persistent storage.

Then I read the url of each saved image so I can show them on the page

See this image showing a single entry

• The second-last row is the file name from the variabile named path
• The last row is the localFileUrls[image.id]

This is the relevant code

let path = fileName(image);

localFileUrls[image.id] = "";

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
  let options = { create: false };

  fs.root.getFile(
    path,
    options,

    // file found on disk successCallback (parameter is a fileEntry)
    function (fileEntry) {
      console.log("file " + path + " EXISTS", fileEntry);
      localFileUrls[image.id] = fileEntry.toInternalURL();
    },

As you can see, I save the internalUrl to the localFileUrls js object

I tried using nativeUrl but nothing changes

In this specific case the consoloe logs a different error

Problem

The problem is that (running on an Android emulator) if I use the internal Url as source for the image doesn't works !

as you can see in the image, there is an image not being loaded; this image uses the internal Url (last row) as source. See the inspected source code

Question

What should I do to use a local image a source for <img> tag?

Permissions

i tried to add these entries to src-cordova\config.xml to be ported automatically into config.xml but, while porting works, these permissions doesn't change anything

 <allow-navigation href="file:*" />
<preference name="AndroidPersistentFileLocation" value="Internal" />

Answer 1

I am not sure about this, but I have a few preferences in my config.xml that might be related to this. Since your console says that you are not allowed to load the file I assume you are missing something that gives permission: at top level:

<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />

inside <android> :

<preference name="AndroidInsecureFileModeEnabled" value="true" />

plugins (also at top level):

    <plugin name="cordova-plugin-filepath" 
    spec="git+https://github.com/jonmaim/cordova-plugin- 
   filepath.git" />
    <plugin name="cordova-plugin-file" spec="^6.0.1" />
    <plugin name="cordova-plugin-file-transfer-ios-fix" spec="^1.7.2" />
    <plugin name="cordova-plugin-file-opener2" spec="^2.0.19" />

I'm not sure which plugins are required to solve your issue, I'd start with the file plugin. docs: https://cordova.apache.org/docs/en/11.x/reference/cordova-plugin-file/