web-dev-qa-db-ja.com

画像（および他のアセット）を読み込む方法 Angular 2プロジェクト？

私はAngularが初めてのので、これを実行するのがベストプラクティスかどうかわかりません。

新しいアプリを生成するためにangular-cliとng new some-projectを使いました。

その中に "assets"フォルダの中に "images"フォルダを作成したので、今私のimagesフォルダはsrc/assets/imagesです。

app.component.html（これは私のアプリケーションのルートです）に、

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

Webアプリケーションを表示するためにng serveを実行すると、画像が表示されません。

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

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

angularangular-cli
54
user3183717

それを私が直した。私の実際の画像ファイル名にはスペースが含まれていましたが、何らかの理由でAngularはそれを好まなかったのです。ファイル名からスペースを削除すると、assets/images/myimage.pngが機能しました。

38
user3183717

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

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

または

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

補間を使用してプロパティをバインドするときは、テンプレート式として[src]を使用します。

<img [src]="imagePath" />

と同じです。

<img src={{imagePath}} />

ソース： どのようにngForの角度2でimg srcをバインドするには？

22
mruanova

Angular 2〜5に固有なので、以下のようにプロパティバインディングを使用してイメージパスをバインドできます。イメージパスは一重引用符で囲みます。

サンプル例

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

11
Bhuwan Maharjan

Angular-cliのデフォルトでは、アセットフォルダがビルドオプションに含まれています。画像の名前にスペースまたはダッシュがあると、この問題が発生しました。例えば ​​：

  • 'my-image-name.png'は 'myImageName.png'でなければなりません
  • 'my image name.png'は 'myImageName.png'でなければなりません

画像をassets/imgフォルダに置いた場合、このコード行はテンプレート内で機能するはずです。

<img alt="My image name" src="./assets/img/myImageName.png">

問題が解決しない場合は、Angular-cli設定ファイルを確認し、自分のアセットフォルダがビルドオプションに追加されていることを確認してください。

9
jmuhire

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

5
chrispy

1。この行をコンポーネントの一番上に追加します。

declare var require: any

2。この行をコンポーネントクラスに追加します。

imgname= require("../images/imgname.png");

  1. hTMLページのimg srcタグにこの 'imgname'を追加してください。

    <img src={{imgname}} alt="">

2
Bheem Singh