IONIC 2 中的图像放在哪里

Question

我刚刚开始使用 Ionic 2。我在 app 中创建了一个 img 文件，里面是一个文件 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

www\lib\ionic 在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 2

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

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

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

希望这对以后的任何人都有帮助。

Answer 3

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

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

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

有许多在线工具，例如 this one 可以将您的 PNG 转换为 Base64 数据 URI。

Answer 4

我遇到了同样的问题，我找到了一种方法，我不知道这是否是最好的方法，但它确实有效。

图像必须在文件夹 www

内的同级文件中构建

www
建设
img

Answer 5

使用 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 任务，以在它们对 runSequence() 的调用中包含新的 assets 任务。我不认为序列中任务的顺序很重要，在这种情况下：

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

如果您将图像输出到与我相同的路径，那么您将在 ../images/image-name.png 的 CSS 和 build/images/image-name.png 的 <img> 标签中引用您的图像.我已确认这些图像在浏览器和 Android 设备上都可见。我认为 iOS.

应该没有什么不同

Answer 6

编辑：从 Ionic 2 RC 0 开始，放置图像的正确位置是 src/assets/img/，引用图像的正确代码是 <img src="assets/img/myImg.png">.请参阅 Ionic 的 change log for 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)
离子本机 ^1.1.0 (package.json)
ionic-cli v 2.0.0-beta.25（已安装 CLI）

Answer 7

大家好，我找到了一种将图像添加到 ionic v2 的方法

在 "www" 目录 (www/images/) 中创建一个图像文件夹，并将所有图像添加到此路径中。

然后像这样给出你的图片路径例如：对于页面源码="images/logo.png"

在CSS .ThemeColor{ 背景：url(/images/bg.png)};

就是这样，适合我..

谢谢

Answer 8

资产文件夹是放置任何媒体的正确文件夹。我图片的位置：

仅供参考：如果您没有该文件夹，请创建它

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 9

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

所以我们需要使用没有../

的路径

src="img/John_Williams.jpg"

这适用于浏览器和 apk

Answer 10

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

它需要在这个目录 (assets) 中，因为它是构建所有内容的来源。

然后停止您的离子服务命令 (Ctrl-C) 或您使用的任何命令。

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

然后通过运行 'ionic serve' 重新启动您的服务器。

这将重建包含图像的目录。您可以将图像引用为背景图像：url('../assets/img/pool.jpg'); 在你的代码中。

我正在使用 ionic 3，遗憾的是它没有获取资产目录中的更改。 IONIC 应该看看这个。

Answer 11

我目前使用的是 ionic 版本 3.6，我必须使用它才能工作： src="../../assets/img/myImage.jpg"

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

希望对您有所帮助

IONIC 2 中的图像放在哪里

Where do Images go in IONIC 2

ionic-framework

ionic2