如何在Ionic 2中插入图像

107

布莱恩·梅勒

我是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文档中找不到任何内容。

谢谢

用户名

就个人而言，我会在适合您的情况下app将图像添加到该文件夹中，并添加一个Gulp任务以将图像复制到该www/build文件夹中。

这是我的gulpfile.js样子：https : //github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我已将此简单任务添加到第gulpfile.js66行左右。

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

确保将任务images添加到任务之前运行的watch任务列表（[..]第三行中列出的任务）。另外，请确保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其与您gulpfile.js类似的其他任务（如copyHTML，）一起使用copyFonts，copyScripts此处https：// github .com / driftyco / ionic2-app-base / blob / master / gulpfile.js