【问题标题】:Ionic 2 not seeing imagesIonic 2 看不到图像
【发布时间】:2016-07-28 17:24:57
【问题描述】:

我目前正在使用 Ionic 2.0.0-beta.32。经过一番搜索,我发现以下代码可以将图像添加到我的项目中,然后在构建时将它们自动导入到最终构建中

我在app中添加了一个名为img的目录,把我所有的图片都放在那里,然后gulpfile中的代码如下

gulp.task('images', function() {
    return gulp.src(['app/img/*'])
        .pipe(gulp.dest('www/build/img'));
});

还有所有的 runSequences

runSequence(
['images', 'sass', 'html', 'fonts', 'scripts'],

这一切都很好,并在构建时将图像移动到www,但是当我运行时

ionic serve --lab

没有图片显示,我已经尝试使用以下

../img/imgname
/img/imgname
img/imgname
build/img/imgname

以上都没有显示我的形象。

任何帮助都会很棒,我在这里拔头发

【问题讨论】:

    标签: ionic2


    【解决方案1】:

    您想使用 Gulp 来修改您的图像(即缩小它们的大小)或类似的东西吗?如果答案是否定的,那么您不需要将该任务添加到您的 gulp 文件中

    gulp.task('images', function() {
        return gulp.src(['app/img/*'])
            .pipe(gulp.dest('www/build/img'));
    });
    

    为什么?因为如果图像不会被更改,那么每次运行任务时,图像都会一次又一次地复制(没有更改)是没有意义的。

    处理图像的一种简单方法是将图像放在www\images 文件夹中,然后在代码中引用它们,如下所示:

    <img src="images/myImage.png" />
    

    由于它们位于 www 文件夹中,因此不会被删除(如果您将它们放在应用程序的 build 文件夹中,则会发生这种情况)。

    【讨论】:

    • 哦,这更有意义,对不起,如果这个问题听起来有点愚蠢,我是新手
    • 有没有关于我应该制作多大的图像的指南?
    • 很高兴我能帮上忙 :) 关于尺寸,我不确定...我想这取决于您的应用将在哪些设备上使用...我们总是尝试使用视网膜图片。
    • 并使用 css 调整它们的大小?
    • 是的...但老实说,我不确定这是否是推荐的处理图像的方法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多