如何在离子2中插入图像

Question

我是 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 文档中找不到任何内容。

谢谢

Answer 1

由于 Ionic2 apps 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（可选）。这使我们能够以与正常 javascript 略有不同的方式编写代码。使用类模块等

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

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

Answer 2

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

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

Answer 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

我希望这是有道理的。

Answer 4

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

Answer 5

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

然后在页面 (html) 你必须参考 <img src="img/logo.png" />

我在 Chrome 浏览器 、App Android 和 App Ios。 (离子 2.0.0-beta.11)

此致！

Answer 6

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

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

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

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

提前致谢！

Answer 7

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

img- file name

图片应该存储在assects中

Answer 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 有点不稳定，因此仍有一些问题需要解决。

祝你好运。

Answer 9

以下对我有用。

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

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

希望对您有所帮助。

如何在离子2中插入图像

How to insert image in ionic 2

ionic-framework

ionic2

angular