2016-11-09 17 views
0

サードパーティのサービスを介してホストされている絶対URLが「https://someimageurl.com/image.png」の画像があります。絶対URLが表示されないAngular ng-srcを使用

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

私はこのような角度のng-srcディレクティブを使用しようとしている:私は要素を検査する場合

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

画像のURLをDOMに注入されるが、それは現れていません。それは1x1次元の空白画像です。しかし、私は画像がネットワークタブを介して(200状態コードで)来るが、その1x1だけを参照してください。

http://placehold.it/350x150」のようなURLを使用しようとすると、正常に動作します。

+0

コンソールログエラーはありますか?私はあなたのために働かなかったURLがhttpsでホストされていることに気づいた。 – aliasav

答えて

1

私はimgタグに 'http://someimageurl.com/'を追加し、スコープコールを使って動的部分をロードすることで、これと同じバージョンのものが正しく動作します。例:

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

良いパス、パスを使う。 – stormec56

+0

これはうまくいきましたが、なぜこれが当てはまるのでしょうか。 – cusejuice

+0

これはAngular Docsにも書かれているようです。https://docs.angularjs.org/api/ng/directive/ngSrc –

0

実際には、私はあなたがcontrollerAs構文と混同したと思います。この場合、$scopeの代わりにコントローラインスタンスにメンバーを追加する必要があります(this)。そうでない場合は{{ myCtrl.image }}{{ image }}に変更する必要があります。

// in controller 

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

// template 

<img ng-src="{{myCtrl.image}}" /> 
関連する問題