イオン2 - イオンビューのアプリに表示されないスタイルや画像

Question

Chromeでテストしたときに問題のないイオン2を使用してアプリを作成しました。しかし、私はクライアントにアップロードし、イオンビューを使用して表示しようとした - すべてのCSSと画像が欠落していた。私は間違ったパスを持っているかもしれません。あるいは、資産がアップロードされていないかもしれませんが、実際にどのようにデバッグするかはわかりません。例えば、私のindex.htmlページに、私は次のリンク

<link href="/css/ionic.app.css" rel="stylesheet"> 

を持っているこれは、クロムではなく、イオン性の観点では正常に動作します。 また、画像のパスが

例えば、表示されない

<img src="/images/btn_play_again.png" /> 

これはクロームで正常に動作しますが、私は、イオンビューで壊れた画像を取得しています。 これを理解する方法はありますか？

Answer 1

あなたのパスが無効であることを思わ：

おそらくそれが始まるスラッシュを取り除くだけの問題になります。以下のファイルは、プロジェクト構造のWWWディレクトリに存在していることを確認してください：彼らはその後、存在しない場合は

css/ionic.app.css 
images/btn_play_again.png 

フォルダにそれらを追加してください、両方のファイルがコピーされなければならないことを保証のsrc /資産、各コンパイル後にフォルダwwwに移動します。

Answer 2

あなたのファイル構造を見ることなくthatsが起こっているとは言い難いですが、私はIonics directivesを画像の問題に関して使用しようとします。これはhref cssの問題の一部でもあります。

<ion-img src="images/btn_play_again.png" /> 

スタイリングについては、なぜ始まったのかわかりません。イオンは、私は、イオンCLIを使用してプロジェクトを再生成するだけだと思いますビルド/のmain.css

<link href="build/main.css" rel="stylesheet"> 

にすべてのSCSS/SASSを構築します。 index.htmlファイルの変更について心配しないでください。またはファイル構造を教えてください。

Answer 3

パスを絶対パスではなく相対パスにします。あなたのローカルパスはアプリのパスと同じではありません。

<link href="css/ionic.app.css" rel="stylesheet"> 
<img src="images/btn_play_again.png" /> 

Answer 4

リリース2.0.0-rc.0（2016-09-28）から、イメージは別の方法で処理されます。

1：src/assets/img

2の場所のすべての画像：ページでHTMLファイルイメージのパスが<img src="assets/img/someImage.png">

3のようになります。コンポーネント固有のSCSSファイルでパスがurl('../assets/img/someImage.png');

のようになります。上記を実装している間は、プロジェクトにプラットフォームを追加しないでください。すでにお使いのプラットフォームを追加した場合 - プラットフォームが除去されると

ionic platform remove <android or ios >

を実行してください - コンパイルプロセスは、イメージをコピーします - ionic serveやionic build <platform>を実行今

ionic platform add <android or ios > 

と新たなプラットフォームを追加してくださいwwwフォルダに保存します。

は、私はこれが問題をソートするために私を助け https://digitaliq.jimdo.com/ionic-framework/ionic-2/using-images/

でポストを見つけました。