App destroy img folder

[marwane_sebbar]

I add a img into app/img/myImage.png but its not working. If you create a folder img into build/ the app destroys it.
how can i selove it !!

[infoproducts]

Create it in app/www/img - that should do it:-)

[iignatov]

@marwane_sebbar

If you create a folder img into build/ the app destroys it.

You could create a build task to copy the image files to the build folder – check out the linked topic for details:

@iignatov

I would recommend you to copy the base gulpfile.js for TypeScript and then apply the required changes by yourself, i.e. update the watch and build tasks by adding the assets task and copy the assets task itself to the file…

[infoproducts]

Are there any real benefits of doing it like that compared to just storing it in www from the start? I can’t really think of one

[iignatov]

@infoproducts

Are there any real benefits of doing it like that compared to just storing it in www from the start?

Not really, it’s just an alternative way - I would say, a personal preference or an organizational habit.

[marwane_sebbar]

it still doesn’t work
the same probleme when i add fonts
for v2.0.0-beta.37

[andrewgy8]

I had to modify my gulp file to include images and fonts in build. Here it is Material Design Icons?

And here is a SO post about this.

[infoproducts]

What “doesn’t work”?

If you place your images in app/www/img it should not be cleared out when building the project.

To reference images from your templates the path should be <img src="img/whatever.png">.

[marwane_sebbar]

. was my first solution but it doesn’t work
it work for you ?

[infoproducts]

Yes, it works for me. Please notice it should be in app/www/img and not app/www/build/img.

Again, what is it that does not work for you? Are the images removed when building? Do you get a broken image?

[marwane_sebbar]

it’s work now i //return del(‘www/build’);
in gulpfile.js

[iignatov]

@marwane_sebbar

was my first solution but it doesn’t work

Maybe you haven’t referenced the images correctly, check out the linked posts for details:

Images not rendering on iOS but fine in browser

AFAIK, when your image is located in www/img then you should reference it as img/key.png from your HTML files or as ../../img/key.png from your SCSS files. I just tried this and it works in Chrome and when deployed to an Android device (I can’t test it on iOS though): .ion-ios-key::before, .ion-md-key::before { max-height: 32px; content: url(../../img/key.png); } You could try to insert the image in one of the pages (i.e. <img src="img/key.png">) to check if it’s present after deployi…

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

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.

[marwane_sebbar]

Images not rendering with htm src but fine with scss background: url(…/img/back.jpg)
how can i selove it ?

[iignatov]

@marwane_sebbar

Images not rendering with htm src but fine with scss background: url(…/img/back.jpg)
how can i selove it ?

Most probably you’re referencing them incorrectly from the HTML files – check out the linked topics that I mentioned above for information on how to reference them.

[alejandrocao]

Hi @iignatov, could you clarify where would be place the img folder for RC0 projects?

I create my project from sidemenu template.

I have this file structure:

project\src
project\src\app
project\src\assets
project\src\pages
project\src\theme

project\www
project\www\assets
project\www\build

If I put the img folder under project\www ionic serve works great but after sometimes the img folder is deleted, I think it’s when I run ionic build android. If I create the img folder under project\src\img or project\src\www\img ionic serve doesn’t work.