如何在离子2中插入图像 [英] How to insert image in ionic 2

问题描述

我是离子2的新手，我正在尝试插入图像，但我没有意识到真正的路径。文件app / pages / getting-started / getting-started.html内的

I'm new on ionic 2 and i'm trying to insert an image, but i don't realize the real path. inside the file 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文件夹中的相同文件。

Create a folder app/img and inserted an img1.png file inside it. and the same file inside the app/pages/getting-started folder.

所以，这应该很简单，但在离子文档中找不到任何内容。

So, this should be easy, but can't find anything inside the ionic docs.

谢谢

推荐答案

就个人而言，我会在任何地方添加图片感觉适合你，在你的情况下在 app 文件夹中，并添加一个Gulp任务将图像复制到 www / build 文件夹。

Personally, I would add the images wherever it makes more sense for you, in your case in the app folder, and add a Gulp task to copy the images to the www/build folder.

这就是我的 gulpfile.js 看起来像： https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

This is how my gulpfile.js lookslike: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我已将此简单任务添加到第66行的 gulpfile.js 。

I have added this simple task to the gulpfile.js around line 66.

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

确保添加任务 images 在监视任务（[..]，第3行中列出的任务）之前运行的任务列表。此外，每当您添加新图像时，请确保运行 gulpWatch （第7行）

Make sure the task images is added to the list of tasks that run before the watch task (the tasks listed inside [..], 3rd line). Also, make sure to run gulpWatch whenever you add a new image for example (line 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 和要求它并在 gulpfile.js 中使用，类似于其他任务，例如 copyHTML ， copyFonts ， copyScripts 此处 https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

Alternatively, you can use this gulp plug-in https://www.npmjs.com/package/ionic-gulp-image-task and require it and use in your gulpfile.js similar to the other tasks such as copyHTML, copyFonts, copyScripts here https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我希望这是有道理的。

这篇关于如何在离子2中插入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！