cordova 从设备存储加载图像文件

Question

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.

Answer 1

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

Answer 2

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: ");
        });
    }

Answer 3

<img id="the_img" src="/storage/emulated/0/Android/data/com.test.Dir/files/myimg.jpg" width="100" height="150">