Cannot access image files inside my device local storage using angularjs ng-src

Question

I am using AngularJS and Cordova, and I'm using Visual Studios 2013 to simulate the cordova application.

I have a bunch of image files inside the ms-appdata:///local/ directory and I'm trying to show those images by using ng-src="{{img}}" where $scope.img = "ms-appdata:///local/image.jpg"

HTML

 <img ng-src="{{img}}" alt="" />

JavaScript

 $scope.img= "ms-appdata:///local/image.jpg";

When I run this code I dont even get the missing image icon thing at the top, its almost like there is no image at all.

when I change ng-src="{{img}}" to src="ms-appdata:///local/image.jpg" the image shows up no problem.

I have already tried $sce.trustAsResourceUrl("ms-appdata:///local/image.jpg").$$unwrapTrustedValue() as another Stack Overflow answer suggested doing.

Estus Flask · Accepted Answer · 2015-09-21 20:55:59Z

1

$sce.trustAsResourceUrl can help to interpolate url on src attribute directly, but when ng-src directive assigns interpolated value to src attribute, it is already a string, not trusted object. The information if this url was trusted is lost in ng-src.

$sce.trustAsResourceUrl("...").$$unwrapTrustedValue() doesn't make sense in this context, because it will give you the same "..." untrusted string on the output.

I believe the best thing that can be done in this case is to add a new protocol to the white list.

app.config(function ($compileProvider) {
  var whitelist = $compileProvider.imgSrcSanitizationWhitelist();
  whitelist = new RegExp(whitelist.source.replace(/(ftp)/, '$1|ms-appdata'));
  $compileProvider.imgSrcSanitizationWhitelist(whitelist);
});

answered Sep 21, 2015 at 20:55

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gandhi Over a year ago

Are you trying to replace ms-appdata to ftp protocol in the code?

Estus Flask Over a year ago

Gandhi Over a year ago

Estus Flask Over a year ago

@Gandhi Nope. Does it work in the opposite direction, when you remove https?| from whitelisted protocols? I would suggest to open a new question that replicates your problem and contains your own code.

Gandhi Over a year ago

Hi, thanks for the info. Was trying to help out someone on this issue. Thes issue was not with sanitization but with compileprovider getting overriden somewhere else losing all the changes. Fixed now it seems. Cheers

Collectives™ on Stack Overflow

Cannot access image files inside my device local storage using angularjs ng-src

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related