如何在离子2中插入图像

Question

我是离子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文件夹中的相同文件.

所以,这应该很容易,但在离子文档中找不到任何内容.

谢谢

Answer 1

用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"

离子2有点不稳定,所以还有一些需要解决的怪癖.

祝好运.

Answer 2

就个人而言,我会将图像添加到对你更有意义的地方,在你的情况下在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任务列表([..],第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);
    }
  );
});

另外,您也可以使用此一饮而尽插件https://www.npmjs.com/package/ionic-gulp-image-task和require它在你的使用gulpfile.js类似于其他任务,例如copyHTML,copyFonts,copyScripts这里的https:// github上的.com/driftyco/ionic2应用内基/斑点/主/ gulpfile.js

我希望这是有道理的.

Answer 3

由于Ionic2应用程序ES2015 js符合正常的javascripts(ES5),你应该在www/build文件夹中有你的图像等

因此,创建一个文件夹www/build/img并在其中添加您的图像.然后你应该能够访问它build/img/img1.png

编辑

添加问题的答案 i don't undestand why you need to work the code in app folder but put insert the images into www folder

Ionic2使用最新的JavaScript标准,如ES2015(ES6),Typescript(可选).这允许我们以与在普通javascript中稍微不同的方式编写代码.有课程模块等

然而,大多数浏览器仍然不支持这种新的javascript标准,因此Ionic使用一个名为transpiler的概念将新的javascript代码更改为旧的javascript代码,以便浏览器可以理解.

所以使用Ionic2即使你在app文件夹中的代码最终它编译并从www文件夹运行.从技术上讲,你的离子应用程序仍然从www文件夹运行,因为这个原因你必须将你的图像添加到www文件夹.