Search code examples
iospathimageviewtitaniumappcelerator

Appcelerator : ImageView and local files


for two days now, i have been looking for the correct place to put my local images and the correct way to access them in the Appcelerator platform (working with Alloy framework). All i want to do is simply display a local image through an image view component. It works well with an image get from URL but seems impossible to get it from a local file.

this is an simple image view declaration in my index.js controller /app/controllers/index.js. Where do i have to put my image to get this code working?

var img = Ti.UI.createImageView({
   image:'images/DefaultIcon.png',
   top:10,
   width:100,
   height:100
});
$.index.add(img);

I have read all the documentation about that issue and read a lot of similar questions over the internet. Anyway, none of the answers i've been reading bring me the correct solution. No matter where i put my images into my project directory (assets folder, root folder, resource folder, image folder), those images seem to be not accessible ! I'm currently developing on iOS platform... I really hope some of you guys have the solution ...!

Best regards,

Quentin


Solution

  • You need to put the images in the /app/assets/iphone/images folder.

    Within that folder you can create as many folders as you'd like, the only thing you need to do is update the path accordingly.

    So, you have an image with the name myIcon.png. Put this in /app/assets/iphone/images/myIcon.png (and don't forget to include @2x and @3x images in the same folder).

    Then, in your imageView use this path /images/myIcon.png.

    Want to put it in a folder? For example /app/assets/iphone/images/icons/myIcon.png then reference it in an imageview with /images/icons/myIcon.png.

    For android you too need to use the images folder inside app/assets/android. But to specify dimension specific images you can put them in ldpi, mdpi,hdpi,xhdpi,xxhdpi and xxxhdpi folders as specified by Android