ionic2 画像フォルダの設定について

ionic2

imgフォルダが無い?

ionic2のプロジェクトをセットアップするのには、CLIから

ionic start projectName –v2

と叩くだけです。簡単ですね。
プロジェクトに必要なデータを勝手にダウンロードして、環境がほぼ自動で整います。

さて、準備された環境を開いてみると、本来あるべきフォルダが無いことに気付きます。

そう、
IMGフォルダが無いんです。

ionic2 画像はどこに保存するべき?

デフォルトで画像を保存するべきディレクトリが無いので、結構困ります。
色々調べた結果、 assets/img/に画像を保管するのが正しいみたいです。

assetsディレクトリ内には、imgディレクトリが無いので、これは作って下さい。

この辺については

GITHUBのこことか
スタックオーバーフローのこことかを参照して下さい。

英語なのが残念です。本当にionicのころもそうでしたが、リソースの殆どは英語なのが辛いところ。
英語苦手な私はしんどいです。

実装例

さて、無事に assets/img ディレクトリ内に画像を保存したら、コーディング例です
HTML(というかテンプレート)の場合は、以下の様に記述できます

<img src="assets/img/画像ファイル名">

CSSの場合は指定がちょっと変わります。画像を背景に使いたいときとか、CSSが必要になることもありますので載せておきます(正しくはSCSSです)

	#login {
		background: url("../assets/img/画像ファイル名") no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

しかし、ベンダープレフィックスいつまで付けなきゃならないんでしょうね。

コメント

  1. […] IONIC2 画像フォルダの設定について Administrator 2017-03-02 https://sndbox.jp/ionic2/ionic2-image-dir […]