Ionic 2 directory structure

Ionic Framework ionic-v3
1

I am trying to reference an image I have stored in my apps directory, however whatever I try, I cannot get it to display.

<ion-avatar item-left><img [src]="result.avatar64 ? result.avatar64 : 'build/images/blank-profile-picture.png'"></ion-avatar>

The result.avatar64 images displays correctly, but the blank-profile-picture.png does not.

“NetworkError: 404 Not Found - http://localhost:8100/build/images/blank-profile-picture.png”

My directory structure in the app is:

app
----images
---------------blank-profile-picture.png
----pages
---------------search
-------------------------search.html

As you can see, blank-profile-picture.png is just in my directory structure of the app.

When I put a url in it’s place (e.g. http://…), this gets displayed correctly.

<ion-avatar item-left><img [src]="result.avatar64 ? result.avatar64 : 'https://www....some_image.png'"></ion-avatar>

However, I don’t want to access an image off the web, but rather one stored in the same directory as the app itself.

Thanks

2

I believe one of two things have to happen. Either you have it put the folder in the www folder and reference in relation to the index file or adjust your gulp file to copy the file during the build process. I simply up a IMG folder at the root for www folder and used "IMG/image.png.

3

As I read few articles and topics related to ionic2, in which they mentioned to keep your images in project level 'www' folder…
which is a good practice…

create folder name as img in project level www folder…
path for the same are YOUR_PROJECT_NAME/www/img… keep your all images here…

and give path to your images in img tag as follows:

<img src="../../../img/company_logo.png">

This works for me…and this is standard practice too…

EDIT:
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.

this also worked for me…

refer this link -> Images not rendering on iOS but fine in browser

4

SOLVED

Thank you for your help.

I put the images dir under www.

<ion-avatar item-left><img [src]="result.avatar64 ? result.avatar64 : '../../../images/blank-profile-picture.png'"></ion-avatar>

5

Hi Guys,

I am getting some behavior I do not understand. When I test my app in a browser by running ionic serve --livereload, it works fine, and I can see the image:

../../../images/blank-profile-picture.png

However, when I do cordova build, and install the apk on a device, I cannot see the image.

What should the path be? Is the ionic serve directory structure different to the final packaged apk structure?

Thanks

myapp
---------app
--------------pages
-----------------------search
----------------------------------search.html
---------www
----------------images
--------------------------blank-profile-picture.png

6

when your image is located in www/img
– then you should reference it as img/logo.png from your HTML files
– or as ../../img/logo.png from your SCSS files.

this worked properly on my iPad and iPhone5. Try this one…this will work on both ionic serve and real devices

As I already mentioned approach in above reply (edited one), refer this forum answer by one of the ionic team member:

7

Thanks vaibhav_bista.

That works for me now.

8

Welcome, Richard. Happy Coding :wink:

9

@richardmarais I Think a better solution will be to add a gulp task and that way you will avoid all the ../../../../

var copyResources = function() { return gulp.src('app/resources/**/*') .pipe(gulp.dest('www/build/resources')); };

Then add that to the build process. And now can place the images or any other resource under the resources folder and use in the code 'build/resources/.....'

10

Hi royip,

Thanks for the reply.

I am referencing the images as follows:

'images/blank-profile-picture.png'

without any …/ now.

This is just by placing the images folder under www