Angular 2プロジェクトでイメージ（およびその他のアセット）を読み込む方法は？

Question

私はAngularにはかなり新しいので、これを行うのがベストプラクティスではないと思います。

私は新しいアプリケーションを生成するためにangular-cliとng new some-projectを使用しました。それに

は今、私の画像フォルダが、私は

<img class="img-responsive" src="assets/images/myimage.png"> 

を置く（私のアプリケーションのルートです） app.component.htmlで src/assets/images

で、「資産」フォルダ内の「画像」フォルダを作成しました

ng serve私のWebアプリケーションを表示すると、イメージは表示されません。

Angularアプリケーションで画像を読み込むためのベストプラクティスは何ですか？

編集：以下の回答を参照してください。私の実際のイメージ名はスペースを使っていましたが、Angularはそれが好きではありませんでした。ファイル名のスペースを削除すると、イメージが正しく表示されました。

Answer 1

私はそれを修正しました。私の実際のイメージファイル名には空白があり、何らかの理由でAngularがそれを好まなかった。ファイル名から空白を削除したとき、assets/images/myimage.pngが機能しました。

私はapp.component.htmlで次の構文を使用しています私のプロジェクトで

Answer 2

通常、「アプリケーション」はアプリケーションのルートです。app/path/to/assets/img.pngを試しましたか？

Answer 3

：

<img src="assets/img/1.jpg" alt="image"> 

または

<img src='http://mruanova.com/img/1.jpg' alt='image'> 

あなたがプロパティをバインドする際にテンプレート式として[ソース]を使用用いた補間：

：

<img [src]="imagePath" /> 

は同じです10

<img src={{imagePath}} /> 

出典：how to bind img src in angular 2 in ngFor?

Answer 4

5にAngular2に固有なので、私たちは以下のように結合性を利用した画像のパスをバインドすることができます。イメージパスは単一引用符で囲まれています。

サンプル例

<img [src]="'assets/img/klogo.png'" alt="image">