web-dev-qa-db-ja.com

ionic 2に画像を挿入する方法

ionic 2で新しく、画像を挿入しようとしていますが、実際のパスはわかりません。ファイルapp/pages/getting-started/getting-started内.html

<ion-content padding class="getting-started">
  <ion-card>
    <ion-card-content>
      <img src="img1.png" alt="">
      <img src="img/img1.png" alt="">
      <img src="../img/img1.png" alt="">
    </ion-card-content>
  </ion-card>
</ion-content>

フォルダapp/imgを作成し、その中にimg1.pngファイルを挿入します。 app/pages/getting-startedフォルダー内の同じファイル。

したがって、これは簡単なはずですが、ionic docs。

ありがとう

ionic-frameworkangularionic2
19
Braian Mellor

個人的には、appフォルダーにあなたにとってより意味のある場所に画像を追加し、www/buildフォルダーに画像をコピーするGulpタスクを追加します。

これは私のgulpfile.jsがどのように見えるかです： https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

66行目のgulpfile.jsにこの簡単なタスクを追加しました。

gulp.task('images', function() {
    gulp.src('app/**/**/*.png')
    .pipe(gulp.dest('www/build'))
});

タスクimagesがwatchタスク（[..]の3行目にリストされているタスク）の前に実行されるタスクのリストに追加されていることを確認してください。また、たとえば新しい画像を追加するときは常にgulpWatchを実行するようにしてください（7行目）

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['images','sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      gulpWatch('app/**/*.png', function(){ gulp.start('images'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

または、このgulpプラグインを使用できます https://www.npmjs.com/package/ionic-gulp-image-task およびrequire itを使用して、gulpfile.jscopyHTML、copyFonts、copyScriptsなどの他のタスクに似ています https://github.com/driftyco/ionic2-app-base /blob/master/gulpfile.js

それが理にかなっていることを願っています。

15
user1275105

Ionic2.rc2でテスト：

デフォルトのビルドは、src/assets/imgの下のイメージを取得し、assets/imgの下に置きます。 scssファイルからそれらを参照するには、フォルダーを上に移動する必要があります。

background: url('../assets/img/sports-backgrounds.jpg');

それは私がそれを動作させるための唯一の方法であり、テスト中にブラウザで動作していた '../'を省いてさえもです。

同時に、ビュー（htmlファイル）から画像を参照している場合、次のように機能します。

<img src="assets/img/logo-image-for-login-page.jpg"

Ionic 2はやや不安定であるため、まだ解決が必要ないくつかの癖があります。

幸運を。

37
Vladimir

Ionic2アプリES2015 jsは通常のjavascript（ES5）に準拠しているため、www/buildフォルダーに画像などが必要です。

フォルダーwww/build/imgを作成し、そこに画像を追加します。その後、build/img/img1.pngとしてアクセスできるはずです。

[〜＃〜] edit [〜＃〜]

質問への回答の追加i don't undestand why you need to work the code in app folder but put insert the images into www folder

Ionic2は、ES2015（ES6）、TypeScript（オプション）などの最新のJavaScript標準を使用します。これにより、通常のjavascriptとは少し異なる方法でコードを書くことができます。クラスモジュールなど.

ただし、ほとんどのブラウザはこの新しいjavascript標準をサポートしていないため、Ionicは transpiler と呼ばれる概念を使用して、新しいjavascriptコードを従来のjavascriptコードに変更します。ブラウザが理解できること。

そのため、Ionic2では、アプリフォルダー内のuコードが最終的にコンパイルされ、wwwフォルダーから実行されます。技術的に言えば、ionicアプリはwwwフォルダーから実行されます。そのため、wwwフォルダーに画像を追加する必要があります。

8
sameera207

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

画像は、フォルダwww内で、ビルドするファイルの兄弟に配置する必要があります
-www
-ビルド
-img

2
Sergio182k

次は私のために働いた。

挿入された<img src="../../assets/imgs/logo.png" alt="couldn't load"> app/src/pages/homeディレクトリ内にあるhome.htmlファイルに。

画像の場所はapp/src/assets/imgs/logo.pngです

お役に立てれば。

1
Jishnu P

同じ問題がありました。 wwwにimgフォルダーを作成する必要があります。 -> www/img（フォルダに画像を置く...）

次に、ページ（html）で参照する必要があります<img src="img/logo.png" />

Chrome Browser、App AndroidおよびApp Iosでテストします。 （Ionic 2.0.0-beta.11）

よろしく！

0
Félix Castro

Ionic Beta Latest ionic @ beta11。

この問題を解決するには、node_modules/@ ionic/app-scripts/configフォルダーにあるcopy.config.jsファイルに画像の絶対パスを追加します。

ソース（src）と宛先（dest）のパスを指定することにより、特定のフォルダーにこのファイルを追加できます。

これが画像フォルダをwww/build/imagesフォルダにコピーするのに役立つことを願っています

前もって感謝します！

0
krishna raju

Imgフォルダーをwwwフォルダーにコピーするだけで完了です！ ;）

0
Guillaume Le Mière