使用Angular ng-src，绝对URL不显示

Question

我的图片中包含通过第三方服务托管的绝对网址，例如“https://someimageurl.com/image.png”。

// in controller
$scope.image = 'https://someimageurl.com/image.png'

我正在尝试使用Angular的ng-src指令：

<img ng-src="{{myCtrl.image}}" />

当我检查元素时，图像url被注入DOM，但它没有显示出来。它是1x1尺寸的空白图像。但是，我看到图像通过网络选项卡进入（有200个状态代码），但它只是1x1。

当我尝试使用像“http://placehold.it/350x150”这样的网址时，它的效果非常好。

Answer 1

我通过在img标记中添加“http://someimageurl.com/”以及使用范围调用加载动态部分来正确使用此版本。例如：

<img ng-src="http://someimageurl.com/{{myCtrl.image_path}}" />

Answer 2

实际上我认为你对controllerAs语法造成了混淆。在这种情况下，您必须在控制器实例上添加成员（即this）而不是$scope，否则您应该将{{ myCtrl.image }}更改为{{ image }}。

// in controller

var myCtrl = this;
myCtrl.image = 'https://someimageurl.com/image.png'

// template

<img ng-src="{{myCtrl.image}}" />

Answer 3

您应该将角度应用配置为将这些网址列入白名单。见这里：https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider