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正在工作，好像我切换背景颜色，我得到了预期的结果。但是，我没有获得任何背景图片，只是指定了徽标文字。我应该把图像文件放在哪里？

Answer 1

编辑：自Ionic 2 RC 0起，放置图片的正确位置在src/assets/img/，参考图片的正确代码为<img src="assets/img/myImg.png">。请参阅Ionic的change log了解RC0（特别是＃28）。

截至目前，使用官方Drifty Co. Ionic 2 Conference App作为参考，图像应放在www/目录内。

在我目前的Ionic 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);
        }
    );
});

如果您将图片输出到与我相同的路径，那么您可以使用../images/image-name.png中的CSS和<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>

Answer 4

www \ lib \ ionic inside ionic创建一个文件夹img 现在你的道路 www \ lib \ ionic \ img将你的背景图片放在这个img文件夹和你的

中

www\lib\ionic\css\ionic.css 
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}

Answer 5

好的，所以我在IONIC论坛上找到了答案。图像进入www/img，然后是这些图像的路径：

url('../../img/appicon.png')

从pages app中的projectRaster页面文件夹中的css或html引用时。

希望这有助于将来的任何人。

Answer 6

我遇到了同样的问题，我找到了一种方法，我不知道这是否是最好的方式，但它的工作方式。

图片必须在文件夹www

内的兄弟文件上进行构建

WWW
构建
IMG

Answer 7

得到了解决方案。它使用的路径相对于index.html而不是模板文件夹。

所以我们需要在没有../

的情况下使用路径

SRC = “IMG / John_Williams.jpg”

这适用于浏览器和apk

Answer 8

我无法使用PNG文件使其工作。它在浏览器中工作，但是当我构建应用程序并部署到设备时，它没有显示。

我找到了一个更简单的解决方法，而不是摆弄Gulp文件来理解发生了什么，我找到了一个更简单的解决方法：

使用数据URI将图像内嵌到HTML（或CSS）中。

网上有很多工具，例如this one，可以将您的PNG转换为Base64数据URI。

Answer 9

如果您的图片是pool.jpg。将其放在/src/assets/img/pool.jpg

中

它必须位于此目录（资产）中，因为它是您构建所有内容的源。

然后停止离子服务命令（Ctrl-C）或您使用的任何内容。

然后在www目录下删除所有内容（无论如何都要重建）。

然后再次运行'ionic serve'重新启动服务器。

这将使用图像重建目录。您可以将图像引用为background-image：url（'../ assets / img / pool.jpg'）; 在你的代码中。

我正在使用离子3，很遗憾它不会在资源目录中获取更改。 IONIC应该看看这个。

Answer 10

我目前使用的是离子版3.6，我不得不使用它来工作： src="../../assets/img/myImage.jpg"

路径assets/img/myImage对我不起作用

我希望这会有所帮助

Answer 11

嗨大家我找到了一种方法将图像添加到离子v2

在“www”目录（www / images /）中创建一个图像文件夹，并在此路径中添加所有图像。

然后像这样给你的图像路径例如：用于页面 SRC = “图像/ logo.png”

在CSS中

.ThemeColor {background：url（/images/bg.png）};

就是这样，对我有用..

由于

图像在哪里进入IONIC 2

11 个答案: