Ionic3での画像ファイルの格納場所とファイルパスの指定方法

Ionic3でimgタグに画像を指定したい時や、Sassにbackground-imageを指定したい時の、ファイルパスと、画像の保存場所を説明します。

画像ファイルの格納場所

画像ファイルの格納場所は以下のディレクトリに保存します。

srcフォルダ > assetsフォルダ > imgsフォルダ

上記のディレクトリに画像を格納しておくと、「inoic build」を行った際に、以下のディレクトリに吐き出されます。

wwwフォルダ > assetsフォルダ > imgsフォルダ

imgタグでの指定方法

前述したディレクトリにある画像を、imgタグで呼び出したい時のファイルパスの指定方法は以下の通りです。

<img src="assets/imgs/yourimage.png">

CSSでの指定方法

前述したディレクトリにある画像を、CSSのbackground-imageで呼び出したい時のファイルパスは以下の通りです。

.class-name {
  background-image: url('../assets/imgs/yourimage.png');
}

人気記事すべて表示

ハイブリッドアプリすべて表示