CODEWITHSUNDEEP
ionic2
BigJobbies
BigJobbies

Reputation: 4033

Ionic 2 not seeing images

Im currently working with Ionic 2.0.0-beta.32. After some searching around, I found the following code to add images to my project then at build time have them auto import into the final build

I add a directory in app called img, and place all my images in there, then the code in the gulpfile is as follows

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

and also all the runSequences

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

This all works good and moves the images to the www at build time, but when i run

ionic serve --lab

none of the images show, I've tried using the following

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

None of the above shows my image.

Any help would be great, im pulling out my hair here

Upvotes: 0

Views: 845

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Do you want to use Gulp to modify your images (i.e., reduce their sizes) or something like that? If the answer is no, then you don't need to add that task to your gulp file

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

Why? Because if the image won't be changed, it doesn't make sense that each time that you run your tasks, the images gets copied again and again (without changes).

A simple way to work with images would be to put your images in a www\images folder, and then reference them in your code like this:

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

Since they're in the www folder, they're not going to be deleted (which happens if you place them in the build folder of your app).

Upvotes: 1

Related Questions