Inangularjs, Ng-src For Img Doesn't Show For Local Files

I have an ng-repeat that, among other thing, outputs on image:

method 1: just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol. NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.

method 2: start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so: http://localhost/my_images/image_name use this path for your ng-src.

Solution 2:

Because I Cordova File and Windows weren't playing nice using the call for cordova.file.dataDirectory didn't work. Instead I used the fs object returned by window.requestFileSystem(...,function(fs){...});

When generating my save to path as well as the path to create directories and location data I used fs.winpath which returned C:/.... The web (which Cordova basically is) won't allow you to have access to local files not associated with the site/apps structure, which is now obvious.

I dug in to the fs object and found fs.root.nativeURL points to ms-appdata:///local/. Switching everything over to this still downloaded all files and directories to the same location but stored that to the database as the file location. When the app loaded the ms-appdata path instead of the C:/ path the images displayed.

Solution 3:

oh, a Cordova app.. why don't you place the file in an images folder In your project. since all files will be loaded using index.html (I assume). you can easily refer to the file relative to the location of index.html. how I would normally organize my project is that, my index.html and folders containing resources like js, CSS etc would be on thesame level, so I can easily get the image files using ng-src="img/image_name". so I could have a structure like this index.HTML img ..image_name.ext ..image2.ext css ..style.css test it in a browser location if it works, it will work on the device. Cordova would know how to translate d into something it can recognise.

This is some sample code, i quickly put together. I tested it and it worked. Firstly i create a directory using file plugin and then download to this directory using file transfer. Replace the url parameter of file transfer with the url you wish to download from.

    $ionicPlatform.ready(function() {

            $cordovaFile.createDir(cordova.file.externalDataDirectory, 
                file_location,false).then(
                  function(success){

                    return success;
                },function(error){

                    return error;
                }).then(function(value){

                    var url = material.file_uri;
                    var targetPath = cordova.file.externalDataDirectory 
                            + "/" +file_location + "/" + file_name;
                    var trustHosts = truevar options = {};

                    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
                      .then(function(result) {
                        console.log(result)
                      }, function(err) {
                        console.log(err)
                      }, function (progress) {
                        $timeout(function () {

                          console.log(Math.floor((progress.loaded / progress.total) * 100));

                        })
                      });               

            })

        })

Share