使用帶有絕對URL的Angular ng-src不顯示

Question

我有一個絕對url的圖像，例如通過第三方服務託管的「https://someimageurl.com/image.png」。

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

我試圖用角的ng-src指令是這樣的：

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

當我檢查元素的圖像的URL注入DOM，但它沒有顯示出來。它是1x1尺寸的空白圖像。不過，我通過Network選項卡看到圖像（帶有200個狀態碼），但它只有1x1。

當我嘗試使用像「http://placehold.it/350x150」這樣的網址時，它工作得很好。

Answer 1

我有一個相同的版本，通過在img標籤中添加'http://someimageurl.com/'並使用範圍調用加載動態部分，可以正常工作。例如：

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

Answer 2

您應該將您的角度應用程序配置爲將這些網址列入白名單。看到這裏：https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

Answer 3

其實我認爲你已經混淆了controllerAs語法。在這種情況下，您必須在控制器實例上添加成員（即this）而不是$scope，否則應該將{{ myCtrl.image }}更改爲{{ image }}。

// in controller 

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

// template 

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