图像在哪里进入IONIC 2

Question

我刚刚开始使用Ionic 2.我img在app里面创建了一个文件,它是一个文件logo.png.所以我创建了以下代码:

CSS:

.getting-started {
  .logo {
      background-image: url(./img/logo.png);
  }
}

HTML:

  <ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
  <h3>Welcome to your first Ionic app!</h3>

</ion-content>

我知道css正在工作,好像我切换背景颜色,我得到了预期的结果.但是,我没有得到任何背景图片,只是指定了Logo文本.我应该把图像文件放在哪里？

Answer 1

编辑:从Ionic 2 RC 0开始,放置图像的正确位置src/assets/img/和参考图像的正确代码是<img src="assets/img/myImg.png">.请参阅Ionic的RC0 更改日志(特别是#28).

目前,使用官方Drifty Co. Ionic 2 会议应用程序作为参考,图像应放在www/目录内.

在我目前的离子2个应用程序,图像位于www/img/logo.png,它是在引用app/pages/page_name/page_name.html的<img src='img/logo.png'>,它就像一个魅力.

目前使用:

• ionic-angular v2.0.0-beta.6(package.json)
• ionic-native ^ 1.1.0(package.json)
• ionic-cli v 2.0.0-beta.25(安装CLI)

Answer 2

使用Ionic 2 beta 6,我用一个简单的gulp任务处理了这个问题.我放下了我的图像app/assets/images(这条路径是完全随意的).然后,我将以下任务添加到gulpfile.js:

gulp.task("assets", function() {
    return gulp.src(["app/assets/images/*"])
        .pipe(gulp.dest("www/build/images"));
});

您还需要更新watch和build任务以assets在调用中包含新任务runSequence().在这种情况下,我不相信序列中的任务顺序很重要:

gulp.task("build", ["clean"], function(done) {
    runSequence(
        ["sass", "html", "fonts", "assets", "scripts"],
        function() {
            buildBrowserify().on("end", done);
        }
    );
});

如果您输出您的图片,以相同的路径和我一样,那么你会从引用您的图像,CSS ../images/image-name.png和<img>从标签build/images/image-name.png.我已经确认这些图片在浏览器和Android设备上均可见.我不认为iOS应该有任何不同.

Answer 3

assets文件夹是放置任何媒体的正确文件夹.我的形象的位置:

fyi:如果你没有文件夹,只需创建它

src > assets > img > background.png

variables.scss

.backgroundImage {
  background-image: url('../assets/img/background.png');
}

然后在页面上我想用它:

home.html的

<ion-content padding class="backgroundImage">

</ion-content>

您还可以通过以下方式参考图像:

home.html的

<ion-content padding class="backgroundImage">
    <img src="./assets/img/background.png" width="50%" />
</ion-content>