web-dev-qa-db-ja.com

Ionic 2で画像アセットを使用する正しい方法

Ionic 2の画像アセットのベストプラクティスは何ですか?非システムアイコンとして使用したいSVGがたくさんあります。 Gulpの使用に関する古いヒントをいくつか見つけましたが、Ionicチームは選択したビルドツールとしてRollupを決定したようです。これに関するドキュメントはこれまでのところありません。

誰かがwww/imgに追加するだけだと言った。欠点はありますか?

40
Aen Tan

画像をwww/imgに配置するのは理想的ですが、ionic serveを使用してローカルに配信する場合にのみ機能します。

アプリをビルドすると、この投稿の に示すように、必要なフォルダーからwww/imgフォルダーに画像をコピーするgulpタスクを作成しない限り、www/buildは削除されます

Htmlファイルで使用される画像は、src/assets/img(廃止)ではなく、www/assets/img(推奨)である必要があります。画像タグは次のようになります。

<img src="assets/img/yourimage.jpg" alt="your image">

ionic 2では、src/assetsフォルダーは画像とフォント用です。

これは、ionicチームが ガイドで、既存のionicプロジェクトを変更するために言っていることです

  1. Www/imgをsrc/assets/imgに移動します。

  2. Www /にある他のリソースをsrc/assets /に移動します。

88
AlexB

[...] Ionicチームは、Rollupを選択のビルドツールとして決定したようです。これまでのところ、これに関するドキュメントはありません。

新しいRC.0で画像を管理する方法を尋ねているようです。

会議アプリ で見ることができるように、画像はsrc/assets/imgに保存され、次のようにHTMLコードに追加できます。

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

これは 既存のプロジェクトの変更 ガイド(正確にはステップ31)で言及されている手順の1つであるため、Ionicチームが推奨するものだと思います。

8
sebaferreras

@ ionic/app-scripts:3.1.8

以下のsrcパスはIonic 3.で機能しました(-prefixed ../アセットの前)

<img src="../assets/imgs/{{item.titleID}}.svg" alt="{{item.title_desc}}">
3
javapedia.net

私の場合、/assets/img/...assets/img/...に置き換える必要がありました(/を削除しました)

最初はionicで動作しますが、Androidでは動作しません

0
Luca C.