web-dev-qa-db-ja.com

Ionic 2デバイスに画像が表示されない

画像に正しいurlパスを使用するなどの最も単純なことは、非常に多くの時間と労力を消費し、まったく成功しないように思えます。

だから、私のホームページでは、次のいずれかを使用しようとしました。

<img src="../assets/img/image.jpg"/>
<img src="/assets/img/image.jpg"/>
<img src="assets/img/image.jpg"/>
<img src="./assets/img/image.jpg"/>
<img src="../../assets/img/image.jpg"/>

これらはすべてブラウザに表示されますが、デバイスには表示されません。

私は非常に多くのスレッドを読みましたが、これに対する本当の解決策がないのは残念です。ここで私が間違っていることを本当に知りたいですか？任意の助けと実際のソリューションは非常に高く評価されるでしょう。

angularionic-frameworkionic2
38
bluewavestudio

相対パスでも同じ問題がありました

<img src="../assets/img/vis_reco.png">

ionic serve /で動作し、エミュレータのlivereloadでも動作します（たとえばsrc/pages/home/home.htmlから）。ただし、デバイスでは動作しません。

画像に相対パスを使用しないでください!!!

<img src="assets/img/vis_reco.png">

Ionic（v3）およびangular TypeScriptアプリでも動作します。デバイス（ionic cordova run）とionic serveおよびng s（角度付きアプリ）

使用されたディレクトリツリー：

used dir tree

ionic会議スターターで（公式）の例を見ることができます。試してください：

ionic start ionicConf conference

（ところで：同じquetiosnとここに答え： https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 ）

51
mhoff

../assets/を使用する必要はありません。 assets/img/からパスを指定するだけです。

CSS (background-image, border-image, etc.)の画像の場合、../assets/を使用する必要があります。

アプリをビルドすると、ファイル構造は次のようになります。

 assets/
    img/
       img1.jpg
       img2.jpg

 build/
    main.css
    polyfills.js
    main.js

 index.html

HTMLはindex.htmlに動的に追加されます。したがって、imgタグのsrcは、index.htmlファイルと同じ場所にあります。したがって、assets/img/*.jpgはimgタグのsrcに十分です。 CSSファイルに来ると、assetsフォルダーはその場所に戻るフォルダーです。したがって、CSSでbackground-image、border-imageなどのような画像を使用するには、../assets/img/*.jpgのようなパスを指定する必要があります。

49
Harish

画像をsrc/assets/imgs directoryに追加します

HTMLで画像パスを設定

<img src="assets/imgs/example.jpg">

SCSSで画像パスを次のように設定します

background-image: url(../assets/imgs/example.jpg);

ブラウザ、エミュレータ、ビルドで動作します

9
gauravbhai daxini

私の問題は、フォルダー内のファイル名の大文字です。今すぐチェックアウト

enter image description here

2
Tzvi Gregory Kaidanov

Ionic（v3）では動作するはずです。

<img src="assets/img/image.jpg">

追加

画像のURLが動的な場合は、プロパティバインディングを使用できます。imgsrc like-を使用すると、実際のデバイスでは機能しない場合があります

    <img src="{{imageUrl}}">

それはブラウザで動作しますが、実際のデバイスでは動作しない場合があるため、ここではプロパティバインディングを使用する別の方法を示します。

    <img [src]="imageUrl">

実際のデバイスでの作業です。

2
Md Alamin

私が感じる本当の解決策は：src = "assets/img/image.jpg"のようにすべてのパスを作成し、アプリsrcのすべての場所でそれを実行したら、ビルドを実行します：ionic cordova build ... This次回の実行時に画像が表示されるようにします。

1
Abhay Shiro

ionic cordova build Androidの画像が表示されないIonicでこのソリューションが見つかりました。

これを試して：

<img src="/Android_asset/www/assets/imgs/avatar.png" alt="Loading...">

それは私のために働いています。

1
MD.Riyaz

私は同じ問題に直面していましたが、絶対的から相対的なパスで解決しました、そして、それは現在働いています。 imgの場所を必要とするangularファイルは変更していませんが、私の経験を共有したいのですが、笑.

1
shahbazpirzada

Src/app/assets /フォルダーに画像を追加します

以下のように呼び出します

    <img src="assets/img/bjork-live.jpg"/>
0
Kishore Kumar

画像をアセットフォルダーに挿入します。

例：assets/img/admin.png。

上記のパスで完全に動作します。画像はimgフォルダー内のAssetフォルダーで使用できます。画像があるので、上記の方法で取得します。 .. asset/img。を使用しないでください。

0
mahendren

Htmlテンプレートから画像を参照する場合は、<img src="assets/img/mypic.png">を使用しますionic v3

0
solex

上記の答えにもう1つ付け加えたいと思います。これはすでに2回目の問題であり、両方とも難しい方法で学ぶ必要がありました。

したがって、たとえば「Test」などのサブフォルダーをアセットパスに追加してアプリケーションをビルドすると、「www」フォルダーにTestというフォルダーが作成されます。

後でsrc /内のフォルダーの名前を "test"（小文字のtに注意）に変更すると、 "www"内の名前は "Test"（大文字のtに注意）のままになり、画像はブラウザー内に正常に読み込まれます（ ionic serveを使用します）。ただし、Androidデバイスで実行すると、動作しません（画像は表示されません）。そのため、wwwフォルダー内のフォルダーも手動で名前を変更する必要があります。

この「問題」はWindowsでも持続しますが、Linux/Mac OSではわかりませんが、大文字のTは小文字のTと同等に扱われないため、この問題は発生しないと感じています。

0
Orochi

私のアプリでは、画像をアセットではなくwww/imgに配置し、HTMLファイルで次のようにアクセスすることにより、ブラウザと実際のアプリで画像が正常に表示されます。

<img src="img/filename.png" />
0
Kaixin

これは私に起こったもので、次の方法で解決しました。画像の詳細でファイルが.jpgまたは.JPGのようになっていることを確認してください。 。

0
MKOT

この問題も経験し、「src」ディレクトリのindex.htmlファイルからレンダリングされているかのように、テンプレートファイル内のすべての画像ソースを参照することで解決しました。

<img src="assets/path_to_img_file_in_assets_folder">

「ionic serve」を使用する場合にこれが機能するのはデバイス用にビルドした後ではないのは、「ionic serve」がローカルhttpサーバーを使用するため、ファイルがとして要求されることになります」 http：// localhost：port_number/assets/path_to_file "（正しい）。ただし、デバイス用にapkが構築された後、ローカルサーバーは使用されず、テンプレートはindex.htmlファイルからレンダリングされるため、ファイルにアクセスできません。

0
omadoye abraham