AngularJS ng-src in ie8: image not loaded and “unsafe” added to path

问题

I just wanted to add an image to my app. As advised, I used the ng-src directive:

<img ng-src="{{app.imgBig}}" alt="lorem ipsum" height="100" width="200" title="lorem ipsum" />

It works fine on most browsers but it doesn't on IE8. The image is not loaded as instead of adding the absolute url to the file name, it returns the relative path and adds "unsafe:" before it.

Actually, it's trying to load:

unsafe:img/test.jpg

Instead of:

http://url_of_my_site.com/img/test.jpg

So you know, it may be related to the fact I had to completely disable SCE to support IE7:

$sceProvider.enabled(false);

A quick fix was to create a base path constant and to add it at the beginning of the image path but it's not the best as the app shouldn't be dependent from this base path.

Any idea ?

回答1:

Found a solution myself:

1. Get the current base url thanks to the Location object:

   var base_url = location.protocol + "//" + location.hostname + location.pathname;
   

2. Give it as a base path to my image in my controller:

   imgBig: base_url + 'img/' + $scope.imgBig
   

That way, unsafe: disappeared, it works on every browsers and it's independent from a constant base path.

Hope it can help !

来源：https://stackoverflow.com/questions/21837851/angularjs-ng-src-in-ie8-image-not-loaded-and-unsafe-added-to-path