中安拓也のブログ

プログラミングについて書くブログ

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/assetsimagesディレクトリを作成する

f:id:l08084:20180310165603p:plain

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

f:id:l08084:20180310171602p:plain

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