l08084のブログ

技術記事の執筆は、祈りに近い

Ionicで画像の設定

画像を設定する前のアプリ画面 f:id:l08084:20180304163519p:plain

はじめに

Ionicで画像を設定する方法について

バージョン情報

  • Ionic: 3.9.2

  • Angular: 5.0.3

  • node: 8.1.4

  • macOS High Sierra

画像設定方法

設定したい画像(例では、isometropolis.jpg)をsrc/assets/imgs配下に置く。 f:id:l08084:20180304160647p:plain

CSS(SCSS)から画像を参照する場合

CSSからは、パスを../assets/imgs/[画像ファイル名称]に設定すると画像を参照できる。

src/pages/home/home.scss

page-home {
    background-image: url(../assets/imgs/isometropolis.jpg)
}

HTMLから画像を参照する場合

HTMLからは、パスをassets/imgs/[画像ファイル名称]に設定すると画像を参照できる。

src/pages/home/home.html:

<img id="bird" src="assets/imgs/bird.png">

画像を設定した後のアプリ画面

f:id:l08084:20180304162651p:plain

参考サイト

sndbox.jp