我刚刚开始使用 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 正在工作，就像我切换背景颜色一样，我得到了预期的结果。但是，我没有得到任何背景图像，只有指定的徽标文本。我应该把图像文件放在哪里？
【问题讨论】：
编辑：从 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'>，它就像一个魅力。
目前使用：
【讨论】：
<img src="assets/img/myImg.png"> 两者都不起作用。 <img src="/assets/img/myImg.png"> 仅适用于浏览器，但 <img src="../assets/img/myImg.png"> 适用于浏览器和实际设备
assets/... 而在 CSS 中我必须使用 ../assets/...
使用 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 应该没有什么不同。
【讨论】：
<img src="build/images/myimage.jpg">
assets 文件夹是放置任何媒体的正确文件夹。 我的图片位置：
仅供参考：如果您没有该文件夹，只需创建它
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>
【讨论】：
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%;
}
【讨论】：
好的，所以我在 IONIC 论坛上找到了答案。图片进入www/img，路径如下：
url('../../img/appicon.png')
当从 pages 中的页面文件夹中的 css 或 html 引用 app 时。
希望这对将来的任何人都有帮助。
【讨论】：
我遇到了同样的问题，我找到了一种方法，我不知道是否是最好的方法，但它的工作。
图像必须在文件夹www内的同级文件中构建
【讨论】：
找到解决方案。它的使用路径相对于 index.html 而不是模板文件夹。
所以我们需要使用没有../的路径
src="img/John_Williams.jpg"
这适用于浏览器和 apk
【讨论】：
我无法使用 PNG 文件使其工作。它在浏览器中工作，但是当我构建应用程序并部署到设备时它没有显示。
我没有摆弄 Gulp 文件来了解发生了什么，而是想出了一个更简单的解决方法：
使用数据 URI 将图像内嵌到您的 HTML（或 CSS）中。
网上有很多工具，例如this one，可以将你的PNG转换为Base64数据URI。
【讨论】：
如果您的图片是 pool.jpg。把它放在/src/assets/img/pool.jpg
它需要位于此目录（资产）中，因为它是您构建所有内容的来源。
然后停止您的 ionic serve 命令 (Ctrl-C) 或任何您使用的命令。
然后删除 www 目录下的所有内容（无论如何都会重建）。
然后通过再次运行“ionic serve”重新启动您的服务器。
这将重建包含图像的目录。 您可以将图像引用为背景图像： url('../assets/img/pool.jpg'); 在你的代码中。
我正在使用 ionic 3，遗憾的是它没有在资产目录中获取更改。 IONIC 应该看看这个。
【讨论】：
我目前使用的是 ionic 版本 3.6，我必须使用它来工作：
src="../../assets/img/myImage.jpg"
assets/img/myImage 路径不适合我
希望对你有帮助
【讨论】：
大家好，我找到了一种将图像添加到 ionic v2 的方法
在“www”目录（www/images/）中创建一个图像文件夹，并将您的所有图像添加到此路径中。
然后像这样给出你的图像路径 例如：对于页面 src="images/logo.png"
在 CSS 中 .ThemeColor{ 背景: url(/images/bg.png)};
就是这样，对我有用..
谢谢
【讨论】：