# Where should I put images?

**URL:** <https://forum.ionicframework.com/t/where-should-i-put-images/41463>\
**Category:** ionic-v3\
**Created:** [January 18, 2016, 7:14am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463 "2016-01-18T07:14:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![exanpe](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@exanpe](https://forum.ionicframework.com/u/exanpe)\
**Post date:** [January 18, 2016, 7:14am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/1 "2016-01-18T07:14:08Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![mikeapted](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mikeapted](https://forum.ionicframework.com/u/mikeapted)\
**Post date:** [January 18, 2016, 5:27pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/2 "2016-01-18T17:27:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![exanpe](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@exanpe](https://forum.ionicframework.com/u/exanpe)\
**Post date:** [January 18, 2016, 6:10pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/3 "2016-01-18T18:10:03Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![mikeapted](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mikeapted](https://forum.ionicframework.com/u/mikeapted)\
**Post date:** [January 18, 2016, 7:40pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/4 "2016-01-18T19:40:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![exanpe](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@exanpe](https://forum.ionicframework.com/u/exanpe)\
**Post date:** [January 20, 2016, 3:35pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/5 "2016-01-20T15:35:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brayhoward](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brayhoward/32/96918_2.png) [@brayhoward](https://forum.ionicframework.com/u/brayhoward)\
**Post date:** [February 24, 2016, 8:51pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/6 "2016-02-24T20:51:28Z")

</div>

**/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 🙂

---

<div class="post-metadata">

**Author:** ![snikh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/snikh/32/101385_2.png) [@snikh](https://forum.ionicframework.com/u/snikh)\
**Post date:** [March 3, 2016, 1:48pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/7 "2016-03-03T13:48:10Z")

</div>

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](https://github.com/ryanmcgrath/wrench-js) for copying files.

---

<div class="post-metadata">

**Author:** ![ariellav](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@ariellav](https://forum.ionicframework.com/u/ariellav)\
**Post date:** [July 20, 2016, 7:12pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/8 "2016-07-20T19:12:28Z")

</div>

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](https://www.npmjs.com/package/gulp-imagemin)

---

<div class="post-metadata">

**Author:** ![mauriciotetech](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mauriciotetech/32/102164_2.png) [@mauriciotetech](https://forum.ionicframework.com/u/mauriciotetech)\
**Post date:** [July 22, 2016, 4:41pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/9 "2016-07-22T16:41:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![striff](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@striff](https://forum.ionicframework.com/u/striff)\
**Post date:** [August 14, 2016, 1:33pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/10 "2016-08-14T13:33:21Z")

</div>

**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?

---

<div class="post-metadata">

**Author:** ![hindujhan](https://avatars.discourse-cdn.com/v4/letter/h/8491ac/32.png) [@hindujhan](https://forum.ionicframework.com/u/hindujhan)\
**Post date:** [August 26, 2016, 9:16am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/11 "2016-08-26T09:16:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gsoulie](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gsoulie/32/98677_2.png) [@gsoulie](https://forum.ionicframework.com/u/gsoulie)\
**Post date:** [September 29, 2016, 2:35pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/12 "2016-09-29T14:35:39Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [September 29, 2016, 3:44pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/13 "2016-09-29T15:44:39Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![numerized](https://avatars.discourse-cdn.com/v4/letter/n/34f0e0/32.png) [@numerized](https://forum.ionicframework.com/u/numerized)\
**Post date:** [September 29, 2016, 7:25pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/14 "2016-09-29T19:25:41Z")

</div>

+1 it works @SigmundFroyd

---

<div class="post-metadata">

**Author:** ![raymondativie](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/raymondativie/32/90670_2.png) [@raymondativie](https://forum.ionicframework.com/u/raymondativie)\
**Post date:** [October 5, 2016, 11:39am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/15 "2016-10-05T11:39:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![balasivagnanam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/balasivagnanam/32/69573_2.png) [@balasivagnanam](https://forum.ionicframework.com/u/balasivagnanam)\
**Post date:** [October 6, 2016, 2:04am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/16 "2016-10-06T02:04:07Z")

</div>

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`

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/9/9/997c677fcf7bca65c73110485fb057e5adca22ef.png)

---

<div class="post-metadata">

**Author:** ![ruialves\_programming](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ruialves_programming/32/96340_2.png) [@ruialves\_programming](https://forum.ionicframework.com/u/ruialves_programming)\
**Post date:** [October 6, 2016, 2:27pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/17 "2016-10-06T14:27:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![balasivagnanam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/balasivagnanam/32/69573_2.png) [@balasivagnanam](https://forum.ionicframework.com/u/balasivagnanam)\
**Post date:** [October 6, 2016, 2:30pm UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/18 "2016-10-06T14:30:29Z")

</div>

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

parallel.

---

<div class="post-metadata">

**Author:** ![dulciepercy](https://avatars.discourse-cdn.com/v4/letter/d/b5e925/32.png) [@dulciepercy](https://forum.ionicframework.com/u/dulciepercy)\
**Post date:** [October 18, 2016, 6:08am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/19 "2016-10-18T06:08:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sumer](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@sumer](https://forum.ionicframework.com/u/sumer)\
**Post date:** [October 18, 2016, 6:42am UTC](https://forum.ionicframework.com/t/where-should-i-put-images/41463/20 "2016-10-18T06:42:17Z")

</div>

help me

> [@Incomprehensible background notification problem?](https://forum.ionicframework.com/t/incomprehensible-background-notification-problem/67179):
>
> hi thank you for your help just ios platform I’ll tell you the problem with images A1 --\> app working A2 --\> After clicking the home button A3 --\> push notification working How to solve

[Next page](https://forum.ionicframework.com/t/where-should-i-put-images/41463.md?page=2)