Question

在视图中，有一个图片标记：

<img id="profile-photo" ng-src="{{uri}}"/>

在控制器中，我设置了一个初始图像源：

$scope.uri = 'test.jpg';

用户可以从他的库中选择一张照片或拍照来替换初始图像源：

navigator.camera.getPicture((uri: string) => {
    var image = <HTMLImageElement>document.getElementById('profile-photo');
        image.src = uri;
        //$scope.uri = uri;
        //$scope.$apply();
    }, (error: string) => {
        console.error(error);
}, options);

这按预期工作;初始图像被新图像替换。但是，我想这样做＆＃34;角度方式＆＃34;并通过更新$ scope.uri而不是直接设置image.src来触发替换。

但是，如果我在回调中注释掉第一行并取消注释以下两行来实现这一点，那么新的图像源会出现404错误，即使$ scope.uri == image.src！

我做错了什么？

Answer 1

D'哦！

这是完全不同的东西 - 我必须明确地将文件和内容协议列入白名单：

module.config( function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|content):/);
})

现在有效。谢谢你的建议！

使用手机摄像头或库图片更新图像源（ng-src）

1 个答案: