Ionic images folder: right location to copy over images and to retain it


#1

I’ve seen this question partially asked before. Where do we put images and how do we access it in code? The answer for that seems to be in www/build/img and and access it in files using a relative path.

So I did that and it seems to work a bit. I manually created a folder www/build/img and put my files there. However that gets erased every time I restart ionic serve.

So what is the right way to put the file there? Is there a consistent/suggested way (maybe gulp entries) to copy the images over correctly on each build? (Also, if it is there, why isn’t it in the default project created by ionic start?

thanks in advance


#2

Put it under www/images or www/assets/images/ and commit it into git, in android refer to image as src='./images/img.png' or src='./assets/images/img.png' I haven’t tried iOS.


#3

Aargh. I’d done it that way for a previous project and I don’t remember there being any issues.

Anyways, so it looks like the build folder is deleted by the ionic tools but other files/folders in the www folder are not.

Thank you for the response.


#4

Just to add to this, you’ll want to reference all images path as if they were relative to the index.html.

Since index.html will actually load all the content, all paths must be relative to that.
Also, when running on the device, be carful with the / in front of the path.
Android and iOS handle that differently and could make it seem like the image path is on the native device and not local to the folder.


App destroy img folder
#5

This should be in the documentation very visible. It is always a pain to figure it out the right paths


#6

Absolutely agree… terrible documentation and sporadic behaviour when it comes to copying images over during ionic serve… sometimes it works… sometimes doesn’t … hours(!) wasted.


#7

Also, if you’re declaring a background image in a page css file the path would be '../assets/images/img.jpg'