2

I have an image tag that is src references to an image file in application directory. I used cordova.file.applicationStorageDirectory to get the app directory and add the rest of path to it ( not: I already created the new directory and image in it using java android studio). so my full path for img src is file:///data/data/com.test.Dir/myfoolder/myimg.jpg so for test I use it like <img id="the_img" src="file:///data/data/com.test.Dir/myfoolder/myimg.jpg" width="100" height="150"> but the img tag is empty so it seems this is not a right way. how can I load images in app directory to image tag.

iDeveloper
  • 1,699
  • 22
  • 47
Rouzbeh Zarandi
  • 1,047
  • 2
  • 16
  • 34

3 Answers3

2

You can use the "cdvfile://" protocol to put images directly. Use it as:

<img src="cdvfile://localhost/persistent/img/logo.png" />

More details here: https://github.com/apache/cordova-plugin-file#cdvfile-protocol

Devashish
  • 1,260
  • 1
  • 10
  • 21
  • 1
    so my path becomes cdvfile://localhost/persistent/myfoolder/myimg.jpg ? – Rouzbeh Zarandi Jun 12 '19 at 10:33
  • PS... is the image inside your www folder? – Devashish Jun 12 '19 at 10:44
  • no www is readonly since its in android_assets so i need to save images in app directory and load them in image tag dynamically https://stackoverflow.com/questions/56525675/how-to-create-new-directory-in-android-assets-programmatically-in-cordova?noredirect=1#comment99635147_56525675 – Rouzbeh Zarandi Jun 12 '19 at 11:01
  • in that case, your path should be `cdvfile://localhost/applicationStorageDirectory/myfolder/myimg.jpg` – Devashish Jun 12 '19 at 12:21
1

I understand that this question is for Cordova on Android, but for future reference - This does not work on iOS because of the latest WKWebView which has a CORS problem with this. You will need to read the file manually and inject the image. Something like this:

    function loadImageFromFile(filename, index) {
        window.resolveLocalFileSystemURL(filename, function success(fileEntry) {
            fileEntry.file(function (file) {
                var reader = new FileReader();
                reader.onloadend = function() {
                    if (this.result) {
                        var elem = document.getElementById("imageitem");
                        var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                        elem.src = window.URL.createObjectURL(blob);
                    }
                };
                reader.readAsArrayBuffer(file);
            });
        }, function () {
            console.log("File not found: ");
        });
    }
ferdil
  • 1,259
  • 11
  • 24
-2
<img id="the_img" src="/storage/emulated/0/Android/data/com.test.Dir/files/myimg.jpg" width="100" height="150">
Rouzbeh Zarandi
  • 1,047
  • 2
  • 16
  • 34