Question

我是离子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文件夹中的相同文件。

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

由于

Answer 1

使用Ionic2.rc2进行测试：

默认构建采用src / assets / img下的图像并将其置于assets / img下。要从scss文件中引用它们，您需要上一个文件夹：

background: url('../assets/img/sports-backgrounds.jpg');

这是我开始工作的唯一方式，即使只是忽略了＆＃39; ../'在测试时在浏览器上工作。

同时，如果你引用视图中的图像（html文件），这里有什么对我有用：

<img src="assets/img/logo-image-for-login-page.jpg"

离子2有些不稳定，所以还有一些需要解决的怪癖。

祝你好运。

Answer 2

就我个人而言，我会在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，{{1 }}，copyFonts此处https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

我希望这是有道理的。

Answer 3

由于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（可选）。这允许我们以与在普通javascript中稍微不同的方式编写代码。使用类模块等。

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

所以使用Ionic2即使你在app文件夹中的代码最终它编译并从www文件夹运行。从技术上讲，你的离子应用程序仍然从www文件夹运行，因为这个原因你必须将你的图像添加到www文件夹。

Answer 4

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

图像必须在文件兄弟文件中进行构建，文件夹www
- www
- 建造
- img

Answer 5

以下对我有用。

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

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

希望这有帮助。

Answer 6

只需将你的img文件夹复制到www文件夹中就可以了！ ;）

Answer 7

我有同样的问题。只有您必须在www中创建 img 文件夹。 - ＆GT; www / img （将图片放入文件夹中......）

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

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

问候！

Answer 8

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

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

您可以通过提供source（src）和destination（dest）路径为特定文件夹附加此文件。

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

提前致谢！

Answer 9

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

img- file name

图像应存储在断言中

如何在离子2中插入图像

9 个答案: