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

问题描述

我是 ionic 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

我已将这个简单的任务添加到 gulpfile.js 的第 66 行附近.

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 添加到在 watch 任务之前运行的任务列表(在 [..] 中列出的任务，第 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 和 require 它并在您的 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

我希望这是有道理的.

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