imgフォルダが無い?
ionic2のプロジェクトをセットアップするのには、CLIから
と叩くだけです。簡単ですね。
プロジェクトに必要なデータを勝手にダウンロードして、環境がほぼ自動で整います。
さて、準備された環境を開いてみると、本来あるべきフォルダが無いことに気付きます。
そう、
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; }
しかし、ベンダープレフィックスいつまで付けなきゃならないんでしょうね。
コメント
[…] IONIC2 画像フォルダの設定について Administrator 2017-03-02 https://sndbox.jp/ionic2/ionic2-image-dir […]