web-dev-qa-db-ja.com

画像の行き先IONIC 2

Ionic 2.で始めたところです。その中にimgファイルをlogo.pngとしてappファイルを作成しました。次のコードを作成しました。

css：

.getting-started {
  .logo {
      background-image: url(./img/logo.png);
  }
}

html：

  <ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
  <h3>Welcome to your first Ionic app!</h3>

</ion-content>

私はcssが動作していることを知っています。背景色を切り替えると、期待した結果が得られます。ただし、背景画像は取得せず、ロゴテキストのみを指定します。画像ファイルはどこに置くべきですか？

ionic-frameworkionic2
23
George Edwards

[〜＃〜] edit [〜＃〜]：Ionic 2 RC 0、正しい場所画像をsrc/assets/img/に置き、画像を参照する正しいコードは<img src="assets/img/myImg.png">になります。RC0のIonicの 変更ログ を参照してください（具体的には＃28）。

現在のところ、公式のDrifty Co. Ionic 2 Conference App を参照として使用して、画像はwww/ディレクトリ内に配置する必要があります。

現在のIonic 2アプリでは、画像はwww/img/logo.pngにあり、app/pages/page_name/page_name.htmlで<img src='img/logo.png'>として参照され、チャームのように機能します。

現在使用中：

  • ionic-angular v2.0.0-beta.6（package.json）
  • ionic-native ^ 1.1.0（package.json）
  • ionic-cli v 2.0.0-beta.25（インストール済みCLI）
35
TheBrockEllis

Ionic 2 beta 6を使用して、これを単純なgulpタスクで処理しました。画像を_app/assets/images_（このパスは完全に任意です）にドロップしました。 _gulpfile.js_：

_gulp.task("assets", function() {
    return gulp.src(["app/assets/images/*"])
        .pipe(gulp.dest("www/build/images"));
});
_

また、runSequence()への呼び出しに新しいwatchタスクを含めるために、buildおよびassetsタスクを更新する必要があります。この場合、シーケンス内のタスクの順序は重要ではないと思います。

_gulp.task("build", ["clean"], function(done) {
    runSequence(
        ["sass", "html", "fonts", "assets", "scripts"],
        function() {
            buildBrowserify().on("end", done);
        }
    );
});
_

私と同じパスに画像を出力する場合、CSSで_../images/image-name.png_から、_<img>_タグで_build/images/image-name.png_から画像を参照します。ブラウザとAndroidデバイスの両方からこれらの画像が表示されることを確認しました。iOSで異なるとは思わない。

23
Justin

アセットフォルダーは、メディアを配置するための正しいフォルダーです。私の画像の場所：

fyi：フォルダがない場合は、作成してください

src > assets > img > background.png

variables.scss

.backgroundImage {
  background-image: url('../assets/img/background.png');
}

その後、私はそれを使用したいページで：

home.html

<ion-content padding class="backgroundImage">

</ion-content>

次の方法でも画像を参照できます。

home.html

<ion-content padding class="backgroundImage">
    <img src="./assets/img/background.png" width="50%" />
</ion-content>
5
LeRoy

www\lib\ionic inside ionic 1つのフォルダーimgを作成します。パスwww\lib\ionic\imgは、このimgフォルダー内に背景画像を配置します。

www\lib\ionic\css\ionic.css 
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}
3
KAUSHAL J. SATHWARA

OK、だからIONICフォーラムで答えを見つけた。画像はwww/img、これらへのパスは次のとおりです。

url('../../img/appicon.png')

pages内のappにあるページフォルダー内のcssまたはhtmlから参照される場合。

これが将来誰にでも役立つことを願っています。

1
George Edwards

解決策を得た。テンプレートフォルダーではなく、index.htmlからの相対パスを使用します。

したがって、パスなしで使用する必要があります。

src = "img/John_Williams.jpg"

これはブラウザとapkの両方で機能します

1
Abhay Singh

私は同じ問題を抱えていました、方法を見つけました、最善の方法であるかどうかはわかりませんが、それは仕事です。

イメージは、フォルダーwww内で、ビルドするファイルの兄弟に配置する必要があります

  • www
  • 建てる
  • img
1
Sergio182k

私は現在ionicバージョン3.6であり、これを使用して動作する必要がありました：src="../../assets/img/myImage.jpg"

パス assets/img/myImage私にとってはうまくいかなかった

これが役立つことを願っています

0
Giwrgos Lampadaridis

PNGファイルを使用して機能させることができませんでした。ブラウザで動作しましたが、アプリをビルドしてデバイスに展開したときに表示されませんでした。

何が起こっているのかを理解するためにGulpファイルをいじる代わりに、より簡単な回避策を見つけました。

データURIを使用して、画像をHTML（またはCSS）にインライン化します。

this one など、PNGをBase64データURIに変換する多くのオンラインツールがあります。

0
Pierre Henry

画像がpool.jpgの場合。 /src/assets/img/pool.jpgに配置します

すべてが構築されるソースであるため、このディレクトリ（アセット）にある必要があります。

次に、ionic serveコマンド（Ctrl-C）または使用するものをすべて停止します。

次に、wwwディレクトリの下のすべてを削除します（とにかくすべて再構築されます）。

次に、「ionic serve」を再度実行してサーバーを再起動します。

これにより、イメージでディレクトリが再構築されます。背景画像として画像を参照できます：url（ '../ assets/img/pool.jpg'）;あなたのコードで。

私はionic 3を使用していますが、assetディレクトリの変更を認識できないのは残念です。IONICこれを見てください。

0
Denis