如何在离子2中插入图像答案

【问题标题】：How to insert image in ionic 2如何在离子2中插入图像
【发布时间】：2016-07-17 11:06:48
【问题描述】：

我是 ionic 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 文件夹中的同一个文件。

所以，这应该很容易，但在 ionic 文档中找不到任何内容。

谢谢

【问题讨论】：

Where do Images go in IONIC 2的可能重复

标签： ionic-framework angular ionic2

【解决方案1】：

由于 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 (Optional) 。这使我们能够以与普通 javascript 略有不同的方式编写代码。带有类模块等。

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

所以使用 Ionic2，即使你在 app 文件夹中的代码最终会从 www 文件夹编译和运行。从技术上讲，您的 ionic 应用程序仍然从 www 文件夹运行，因此您必须将图像添加到 www 文件夹。

【讨论】：

如果可行，请将您的图像保存在任何地方并提供以/（root）开头的完整路径，它应该可以工作。即：[图片文件夹www/xyz/img和<img src="/xyz/img/img1.png">]，或者使用<base>
谢谢，我不明白为什么您需要在 app 文件夹中处理代码，但将图像插入 www 文件夹
我照说的做了，但我在控制台中出错了192.168.1.2:8100/www/build/img/image.png 404（未找到）@BraianMellor
@YokeshVaradhan 你把图片放在哪里了？能写出路径和img源吗？
ionic2 图像在 www/build/img 文件名是 image.png，在我的浏览器中我得到一个像图标的小图像，但我没有得到实际图像

【解决方案2】：

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

图像必须在同级文件中进行构建，位于文件夹 www
- www
-- 构建
-- 图像

【讨论】：

【解决方案3】：

就个人而言，我会将图像添加到对您更有意义的位置，在您的情况下是在 app 文件夹中，然后添加 Gulp 任务以将图像复制到 www/build 文件夹中。

这就是我的gulpfile.js 的样子：https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我已在第 66 行附近的 gulpfile.js 中添加了这个简单的任务。

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);
    }
  );
});

或者，您可以使用这个 gulp 插件 https://www.npmjs.com/package/ionic-gulp-image-task 和 require 它并在您的 gulpfile.js 中使用类似于其他任务，例如 copyHTML、copyFonts、copyScripts 这里 https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我希望这是有道理的。

【讨论】：

如何使用 gulpfile.js 加载设备中的文件夹。因为我添加了包含一个图像和 json 文件的文件夹。你能帮助如何添加 gulpfile 以在设备 ionic 3 中加载我的文件夹。

【解决方案4】：

只需将您的 img 文件夹复制到 www 文件夹中即可！ ;)

【讨论】：

【解决方案5】：

我有同样的问题。只有您必须在 www 中创建 img 文件夹。 --> www/img（把图片放到文件夹里...）

然后在页面（html）中你必须引用<img src="img/logo.png" />

我在 Chrome 浏览器、App Android 和 App Ios 中进行测试。（离子 2.0.0-beta.11）

问候！

【讨论】：

【解决方案6】：

我在使用 Ionic Beta 最新版 ionic@beta11 时遇到了同样的问题。

要解决此问题，您可以在 copy.config.js 文件中附加图像的绝对路径，该文件将驻留在 node_modules/@ionic/app-scripts/config 文件夹中

您可以通过提供源 (src) 和目标 (dest) 路径将此文件附加到特定文件夹。

希望这有助于将图像文件夹复制到 www/build/images 文件夹

提前致谢！

【讨论】：

【解决方案7】：

<img src = "assects/img/abc.png"/>

img- file name

图像应该存储在 assects 中

【讨论】：

【解决方案8】：

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

Ionic 2 有点不稳定，因此仍有一些怪癖需要解决。

祝你好运。

【讨论】：

这个问题的唯一正确答案。节省了我几个小时。谢谢。
<img src="assets/img/..." /> 似乎在 Ionic View 应用程序中不起作用？
是的，我遇到了同样的问题。当我添加 img 标签时，我的应用程序不会呈现。

【解决方案9】：

以下内容对我有用。

将<img src="../../assets/imgs/logo.png" alt="couldn't load"> 插入到位于 app/src/pages/home 目录内的 home.html 文件中。

图片的位置是app/src/assets/imgs/logo.png

希望这会有所帮助。

【讨论】：