InAngularJs, ng-src for img doesn't show for local files

Question

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

<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index">
...
    <img ng-src="{{installation.logo}}" />
...
</div>

When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:

<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products="">
...
     <img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png">
...
</div>

(dots used to hide person and client data)

If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.

--- EDIT ---

I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.

I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.

--- EDIT ---

I set it as file:///C:/... and I'm having the same issue.

I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.

Answer 1

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 = true
                    var 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));

                        })
                      });               

            })

        })

Answer 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.

Answer 3

You can do this in two different ways: 1) Use the file protocol 2) use a local host server to store the picture and access it from the local host

for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.

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.