javascript - 无法使用 angularjs ng-src 访问我的设备本地存储中的图像文件

Question

我正在使用 AngularJS 和 Cordova，并使用 Visual Studios 2013 来模拟 cordova 应用程序。

我在 ms-appdata:///local/ 目录中有一堆图像文件，我尝试使用 ng-src="{{ img}}" 其中 $scope.img = "ms-appdata:///local/image.jpg"

HTML

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

JavaScript

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

当我运行这段代码时，我什至没有在顶部看到丢失的图像图标，几乎就像根本没有图像一样。

当我将 ng-src="{{img}}" 更改为 src="ms-appdata:///local/image.jpg" 时，图像显示没有问题。

我已经尝试过 $sce.trustAsResourceUrl("ms-appdata:///local/image.jpg").$$unwrapTrustedValue() 作为另一个 Stack Overflow 答案的建议。

Answer 1

$sce.trustAsResourceUrl 可以帮助直接在 src 属性上插入 url，但是当 ng-src 指令将插入值分配给 >src 属性，它已经是一个字符串，不是可信对象。如果此 URL 可信，则该信息会在 ng-src 中丢失。

$sce.trustAsResourceUrl("...").$$unwrapTrustedValue() 在此上下文中没有意义，因为它会给您相同的“...”不受信任的字符串在输出上。

我相信在这种情况下可以做的最好的事情就是向 the white list 添加一个新协议(protocol).

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