Where should I put images?


#1

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 !


#2

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.


#3

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 !


Where to put content images, cutouts in the folder structure?
#4

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

<img src=“img/…”>

for CSS background images I have to specify like so:

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

Hope that helps.


#5

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


#6

/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 :slightly_smiling:


#7

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.


#8

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


How to add css file from npm package?
#9

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


#10

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?


#11

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


#12

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 !


#13

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.


#14

+1 it works @SigmundFroyd


#15

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


#16

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


#17

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.


#18

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

parallel.


#19

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?


#20

help me