Angularプロジェクトに画像（およびその他のアセット）をロードする方法は？

106

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

angular-cliを使用しng new some-projectて新しいアプリを生成しました。

それは「assets」フォルダに「images」フォルダを作成したので、今私の画像フォルダは src/assets/images

でapp.component.html（自分のアプリケーションのルートである）、私が入れ

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

ng serveWebアプリケーションを表示しようとしても、画像が表示されません。

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

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

html angular angular-cli

— user3183717
ソース

1

はい、そうです。アセットフォドラーから正しいパス構文を指定しました。名前の不一致に問題がある可能性があります。画像が存在するかどうかを確認してください

— Pardeep Jain

1

間違いなく名前の不一致ではなく、私は最終的にpublic外部にフォルダを作成しsrcて画像を表示しました<img class="img-responsive" src="../../public/images/myimage.png">

— user3183717

修正しました。実際の画像ファイル名にはスペースが含まれており、なんらかの理由でAngularはそれを好みませんでした。私がファイル名からスペースを削除したとき、assets/images/myimage.png働きました。

— user3183717 2017年

1

良い:)ところで、更新されたCLIに追加のパブリックフォルダを作成する必要はありません。彼らはすでに同じ名前のasstesを持っています。

— Pardeep Jain 2017

他の拡張子が付いたファイルにも同様の問題があります（例：.sgfそれらのファイルをホストし、アプリケーションからそれらにリンクしたいのですが、単にそれらをassetsフォルダーに置くだけでは十分ではないようです）。何か案は？

— bvdb 2017

72

それを私が直した。実際の画像ファイル名にはスペースが含まれており、なんらかの理由でAngularはそれを好みませんでした。私がファイル名からスペースを削除したとき、assets/images/myimage.png働きました。

— user3183717
ソース

62

私のプロジェクトでは、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でimg srcをangular 2にバインドする方法？

— ムルアノワ
ソース

1

app.component.htmlとアセットフォルダーは同じレベルにありますか？

— ハリル2017

いいえ、フォルダ構造は自動的に作成され、私と同じフォルダ（project-folder \ src \ assests \およびproject-folder \ app \ app.component.html）が必要です。

— mruanova 2017

26

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構成ファイルかどうかを確認し、ビルドオプションにアセットフォルダーが追加されていることを確認してください。

— jmuhire
ソース

1

[alt]は文字列には必要ありません。[]はデータバインディングに使用します。

— chris_r

14

Angular2から5に固有なので、以下のようにプロパティバインディングを使用して画像パスをバインドできます。画像パスは単一引用符で囲まれています。

サンプル例

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

— ブーワンマハルジャン
ソース

src = "assets / img / klogo.png"と[src] = "'assets / img / klogo.png'"の違いは何ですか？

— gdbj 2017

@gdbjここで回答ですstackoverflow.com/questions/41426974/...

— mohit uprim

したがって、基本的に、そのメソッドを使用してsrcを変更できるようにしたい場合は、[src]を使用してモデルにバインドします。

— gdbj 2018年

スレッドに答えてくれてmohitに感謝します。@gdbj混乱を今すぐ整理していただければ幸いです。

— Bhuwan Maharjan

将来の読者に、gdbjによる最初のコメントの内側の単一引用符を探すように指摘したいと思います。コメントフォントでは、上記の回答よりも見づらくなっていますが、見落とすと混乱が生じる可能性があります。（お使いのブラウザによって異なる場合があります。）

— SilithCrowe 2018

7

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

— クリスピー
ソース

angular-cli put appとassetsフォルダーは、フォルダーの下に個別に配置しsrcます。（申し訳ありませんが、フォルダの構造と名前をどのようにフォーマットするべきかわかりません）

— user3183717

5

１。この行をコンポーネントの上部に追加します。

declare var require: any

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

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

この「imgname」をhtmlページのimg srcタグに追加します。

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

— フィーム・シン
ソース

これは、フラットでないファイル階層ツリーに適しています。

— chris_r

-1

私にとって「私」は「画像」の資本でした。これもangular-cliは気に入らなかった。したがって、大文字と小文字も区別されます。

— 匿名の作成者
ソース

-1

静的リソース（この場合は画像）のパスを参照するhtmlファイルの場所に常に依存しています。

例A：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

ご覧のとおり、yourpage.htmlはルート（srcフォルダー）から1フォルダー離れています。このため、ルートに戻るには../の量が必要です。そうすると、ルートからイメージに移動できます。

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

例B：

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

ここでは、2つのフォルダーでツリーに移動する必要があります。

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

— sznczy
ソース