Where should I put images?

exanpe · January 18, 2016, 7:14am

Hi everyone,

I have a fair simple question, but can’t find any response anywhere :

Based on the ionic v2 scaffolding, is there any location dedicated to assets like images? Location that would be automatically copied in build/ folder.

Thanks !

mikeapted · January 18, 2016, 5:27pm

Based on sample conference app it seems the best practice right now is to place your images directly in the ‘www’ folder, so something like ‘www/img’ and then refer to them with src=‘img/…’ from your pages. They don’t need to be moved around in the build process as they aren’t compiled or modified in any way.

This is what is working for me right now at least.

exanpe · January 18, 2016, 6:10pm

Alright I’ll do it that way for now. I looked for a way to package my images along my components/pages (in .scss) but that ll do the trick.

Thanks for answering !

mikeapted · January 18, 2016, 7:40pm

Just as an addition, since I had to work this out as well, for regular images in HTML I link as mentioned:

for CSS background images I have to specify like so:

background-image: url(’…/…/img/…’);

Hope that helps.

exanpe · January 20, 2016, 3:35pm

I actually use “/img/…” from CSS, but haven’t tested in device yet.

brayhoward · February 24, 2016, 8:51pm

/img/my-image/png path does NOT work on the device or with Ionic View. It will work while serving the App locally though. ‘’‘url(…/…/img/my-image.png)’’’ Works for both. Just a lil Heads up to future readers of this thread

snikh · March 3, 2016, 1:48pm

In addition to the above.

I don’t find right comfortable solutions for img path in html/css yet.
But I put images to app/assets/img folder and then copy them to www/build/assets/img folder with script that I placed in beforeServe hook in ionic.config.js file

`
hooks: {
beforeServe: function(argv) {
var fs = require(‘fs’),
wrench = require(‘wrench’),
appImgPath = ‘app/assets/img’,
buildImgPath = ‘www/build/assets/img’;

        removeOldImages();

        function removeOldImages() {
            fs.access(buildImgPath, function(err) {
                if (!err) {
                    console.log('\x1b[33m' + 'Remove old images from previous build', '\x1b[0m');
                    wrench.rmdirSyncRecursive(buildImgPath);
                    console.log('\x1b[33m' + 'All images removed', '\x1b[0m');
                }
                copyImages();
            });
        }

        function copyImages() {
            prepareFolders(buildImgPath, copyContent);

            function copyContent() {
                fs.access(appImgPath, function(err) {
                    if (err) {
                        console.log('\x1b[34m' + 'Warning! No images to copy', '\x1b[0m \n');
                        return;
                    }
                    console.log('\x1b[33m' + 'Copy new images to build folder', '\x1b[0m');
                    wrench.copyDirSyncRecursive(appImgPath, buildImgPath);
                    console.log('\x1b[33m' + 'All images copied', '\x1b[0m \n');
                })
            }
        }

        function prepareFolders(pathArr, callback, curParh) {
            pathArr = (pathArr.pop) ? pathArr : pathArr.split('/');
            curParh = (!curParh) ? pathArr.shift() : curParh + '/' + pathArr.shift();

            fs.access(curParh, function(err) {
                if (err) {
                    fs.mkdirSync(curParh);
                }
                if (pathArr[1]) {
                    prepareFolders(pathArr, callback, curParh)
                } else {
                    callback();
                }
            })
        }
    }
}

`
I used wrench module for copying files.

ariellav · July 20, 2016, 7:12pm

Using Gulp:

You can add a custom task:

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

and then make sure you add it in the runSequence(s). e.g.

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

I also used ‘gulp-imagemin’ to compress the images. npm - gulp-imagemin

mauriciotetech · July 22, 2016, 4:41pm

Best solution! i’m using on my projects. thanks

striff · August 14, 2016, 1:33pm

EDIT: For some reason I did not have the build folder in www/ folder. After I manually created it, the error went away, and everything works as expected. The code displays the image also on device:
<ion-img src="build/images/myPicture.png"></ion-img>

Hello @ariellav,

After I added this custom task, to my gulpfile.js and add the task in the build runSequence I receive error on building the Android apk.

[16:23:00] ‘images’ errored after 82 ms
[16:23:00] Error: EPERM: operation not permitted, mkdir ‘E:\datz_new\DatzApp\DatzMagazine\www\build\images’

and after that every task is failing:

[16:23:03] ‘html’ errored after 3.06 s
[16:23:03] Error: EPERM: operation not permitted, mkdir ‘E:\datz_new\DatzApp\DatzMagazine\www\build’
at Error (native)
[16:23:03] ‘scripts’ errored after 3.06 s
[16:23:03] Error: EPERM: operation not permitted, mkdir ‘E:\datz_new\DatzApp\DatzMagazine\www\build\js’
at Error (native)
[16:23:03] ‘fonts’ errored after 3.06 s
[16:23:03] Error: EPERM: operation not permitted, mkdir ‘E:\datz_new\DatzApp\DatzMagazine\www\build\fonts’
at Error (native)
[16:23:03] ‘sass’ errored after 3.27 s
[16:23:03] Error: EPERM: operation not permitted, mkdir ‘E:\datz_new\DatzApp\DatzMagazine\www\build\css’
at Error (native)

How do I fix this?

hindujhan · August 26, 2016, 9:16am

Hi Guys i found a method add images to ionic v2

Create a images folder in “www” directory (www/images/) and add your all images in this path.

Then give your image path like this
ex: for pages
src=“images/logo.png”

in CSS
.ThemeColor{ background: url(/images/bg.png)};

That’s it, works for me…

Thanks

gsoulie · September 29, 2016, 2:35pm

Hi,

I have an issue since ionic RC0. Before, adding images into img folder under www works good (device and serve) but now, img folder is systematically removed with it’s content when running ionic serve !

SigmundFroyd · September 29, 2016, 3:44pm

Hey!

So the nice thing with RC0 is that they’ve introduced an official place to store things like images. You can store them underneath src/app/assets. As far as referencing them goes, I believe you can just do assets/myUberWunderbarAsset.jpg. I shall be confirming this shortly myself though.

EDIT:
Sorry! As raymondativie mentions below, it’s actually src/assets.

numerized · September 29, 2016, 7:25pm

+1 it works @SigmundFroyd

raymondativie · October 5, 2016, 11:39am

i think you meant src/assets thats what worked for me thanks!!

balasivagnanam · October 6, 2016, 2:04am

But I am wondering why this error comes when compiling for device. I used the src/assets/images to stores images in my app and using it in my scss.

ionic run android

ruialves_programming · October 6, 2016, 2:27pm

Don’t know about that error in particular. I got a similar error(i think it’s the next after that yellow arrow) which is caused by the .tmp folder, i have to delete everytime i do ionic serve or ionic run.

balasivagnanam · October 6, 2016, 2:30pm

I think this error was because I was trying to do
ionic build android
&
ionic serve

parallel.

dulciepercy · October 18, 2016, 6:08am

Sorry but I still don’t get it. I have my images in src/assets/img and I try to access it with, for example,

imgSource = “src/assets/img/page_01.jpg”;

And I get this error - Cannot GET /src/assets/img/page_01.jpg

I’ve tried all the variations I can think of. If I replace the string with an a web url (http://…) it works, so I know the rest of the code is ok.

Any thoughts thanks?

sumer · October 18, 2016, 6:42am

help me