2016-10-12 12 views
1

この質問は何度か尋ねられました。私はインターネット上ですべての解決策を試してみました。成功していないので、私は何かを見逃していますか?ローカルイメージがIonicに表示されない

Ionicを使用してハイブリッドアプリを構築しています。私は、ユーザーがインターネット接続なしでアプリを起動したり、アプリを通過しているときに接続が失われても、表示できるようにするローカルイメージを持っています。したがって、私はローカルにイメージを持っていたい。

これは画像を取得するための私のタグです:<img class="track-image-left" src="images/track.png" />。画像は、Ionicがアプリケーションを構築した後、www/imagesにあります。

私はイオンをエミュレートしようとしています - lcとChromeでコンソールを見ると、私には次のようになります:GET file:///android_asset/www/images/track.png net::ERR_FILE_NOT_FOUND。私が面白いように見えるのは、ビルド時にIonicがファイル名に文字列を追加するため、実際のフォルダ内の画像ファイル名はtrack.516c558c.pngのように見えます。これが問題になりますか?

それ以外の場合は、誰でも問題の原因を知ることができますか?

問題はAndroidとiOSの両方で発生することに注意してください。

答えて

0

答えは、私がイオンを使ってエミュレートする前にアプリを構築するためにはじめることでした。 。イサキは、ファイル名の変更をしましたが、それは、イオンは、ファイル名の変更ではなく、イサキをやっていたようにそれが見えたというgrunt build --force && ionic emulate android --lcを実行している(こんなに遅くビルドプロセスで行われた

したがって、私の代わりにこれをしなかった:

.track-image-left { 
    background: url('../images/train-track.png') no-repeat; 
    background-size: 100%; 
    display:inline-block; 
    float: left; 
    height: 20px; 
    width: 40px; 
    margin-top: 40%; 
} 

.track-image-right { 
    background: url('../images/train-track.png') no-repeat; 
    background-size: 100%; 
    display:inline-block; 
    float: right; 
    height: 20px; 
    width: 40px; 
    margin-top: 40%; 

    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 

<div class="track-image-left"></div> 
<div class="track-image-right"></div> 

うまくいった。

関連する問題