ionicに画像を挿入するには2

Question

私はionic 2で新しく、画像を挿入しようとしていますが、実際のパスはわかりません。ファイルアプリ/ページ/ - 入門/乗車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> 

内部 は、フォルダアプリ/ IMGを作成し、内部のimg1.pngファイルを挿入します。 app/pages/getting-startedフォルダ内に同じファイルがあります。

これは簡単なはずですが、イオン文書の中には何も見つかりません。

おかげ

Answer 1

から
構築あなたの場合はappフォルダにあり、Gulpタスクを追加して画像をwww/buildフォルダにコピーします。

これは私のgulpfile.js lookslike方法です：https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

私はgulpfile.js

66線を中心

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

にこの単純なタスクを追加したタスクimagesが実行されるタスクのリストに追加されていることを確認しますwatchタスク（[..]、第3行にリストされているタスク）の前に実行します。また、別の方法として

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); 
    } 
); 
}); 

（ライン7）あなたは、たとえば、新しいイメージを追加するたびにgulpWatchを実行することを確認してください、あなたはそれがこの一気のhttps://www.npmjs.com/package/ionic-gulp-image-taskでのプラグインとrequireを使用し、他のタスクへのごgulpfile.js類似したで使用することができますcopyHTML,copyFonts,copyScriptsここにhttps://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

などがあります。

Answer 2

Ionic2がアプリのでES2015は、JSは通常のJavaScript（ES5）まで準拠し、あなたはとてもフォルダwww/build/imgを作成し、そこに自分の画像を追加www/buildフォルダ

になどあなたのイメージを持っている必要があります。そして、あなたは質問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）など、最新のJavaScriptの標準を使用する答えを追加build/img/img1.png

EDIT

としてそれにアクセスすることができるはずです）。これにより、通常のjavascriptとは少し違った方法でコードを書くことができます。クラスモジュールなど

しかし、まだほとんどのブラウザはこの新しいJavaScript標準をサポートしていないため、transpilerという概念を使用して、新しいJavaScriptコードを古いファッションのJavaScriptコードに変更してブラウザが理解できるようにします。

したがって、アプリケーションフォルダのuコードは最終的にコンパイルされ、wwwフォルダから実行されます。技術的に言えば、イオンアプリはまだwwwフォルダから実行されます。その理由は、画像をwwwフォルダに追加する必要があるからです。

Answer 3

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

画像は、フォルダ、WWWの内側に、構築するファイルの兄弟に行かなければならない
- WWW
- それは、より理にかなってどこに私は、画像を追加し、個人的にIMG

Answer 4

wwwフォルダ内のimgフォルダをコピーするだけです。 ;）

Answer 5

同じ問題がありました。あなたはwwwのimgフォルダを作成する必要があります。 - > WWW/IMG（フォルダ内の画像を入れ...）

次にページ（HTML）で、あなたの私はChromeブラウザ、のApp Androidのとでテスト<img src="img/logo.png" />

を参照する必要がありますApp Ios。 （Ionic 2.0.0-beta.11）

よろしくお願いします！

Answer 6

Ionic Beta Latest ionic @ beta11を使用しているときも同じ問題がありました。

---

あなたはnode_modules/@イオン/アプリ-スクリプト/ configフォルダ内に存在することになるcopy.config.jsファイル内のイメージに絶対パスを追加することができます。この問題を解決するには

あなたは追加することができますソース（src）とデスティネーション（dest）のパスを指定して、特定のフォルダのファイルを作成します。

希望は、この画像が事前に

感謝をフォルダ/構築/ WWWへのコピーの画像フォルダに役立ちます！

Answer 7

<img src = "assects/img/abc.png"/> 

img- file name 

画像はIonic2.rc2でテストassects

Answer 8

に格納する必要があります。

デフォルトのビルドは、SRC /資産/ IMG下の画像を取り、資産/ IMGの下にそれを置きます。

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

「../」テスト中のブラウザで働いていた私はそれもさえ出たまま、動作するようになった唯一の方法だ：SCSSファイルからそれらを参照するためには、フォルダを移動する必要があります。同時に、あなたはビュー（htmlファイル）から画像を参照している場合は、ここでは私のためにどのような作品だ

を：

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

イオン2は、やや不安定であるので、いくつかの癖それはまだそこにいますアイロンをかける必要があります。

幸運。