Angular CLI で作ったアプリから画像を参照する

Angularアプリによる画像フォルダの作成方法 ＆ アクセスの仕方

バージョン情報

• angular/cli: 1.6.5

• Angular: 5.2.3

• Typescript: 2.4.2

• OS: darwin x64

• Node: 8.1.4

画像フォルダを作ってファイルを置く

src/app/assetsにimagesディレクトリを作成する

アクセスしたい画像ファイルを置く

CSSからアクセスする

src/app/app.component.scss:

.wall {
    background-image: url(/assets/images/white-wood.jpg);
}

HTMLからアクセスする

src/app/app.component.html:

<img #bird [ngStyle]="birdPosition$ | async"
 class="bird" src="/assets/images/bird.png">

参考サイト

webpack - Using Angular CLI and unable to use relative image paths in CSS files - Stack Overflow

Best place to put assets folder? · Issue #713 · angular/angular-cli · GitHub