Angular JSにローカル画像を読み込むには？

Question

私はちょうどAngulerJsで始まり、サブフォルダから画像をロードしたいと思います。

これは私のコントローラコードです。

$scope.img_source = "../WebContent/Welcom2Iquote.gif"; 

これは私のindex.htmlのコードです：

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

Answer 1

を使用すると、通常のHTMLイメージの画像を配置する

<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source"> 

Answer 2

を使用してあなたがこの

のように行うことができ、画像タグを使用します

$scope.img_source = "../WebContent/Welcom2Iquote.gif"; 

あなたは、角度-CLIを使用している場合、あなたは、溶液中assetsフォルダを持っている必要がありNG-srcの

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

Answer 3

を使用して、HTMLに下記のような画像をバインドすることができ、画像のパスのこれはあなたのスコープ変数場合。 読み込みたい画像をこのフォルダにドロップします。

今whatever-component.htmlページ{{}}がwhatever-component.htmlファイルに対応するtypescriptファイルにimg_sourceを定義する必要があります。このライン <img src="assets/{{img_source}}" alt="img_source" title="img_source">

を挿入します。

だから、あそこに画像の名前を定義します。 public img_source: string = 'yourpicture.jpg';