Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development Knowledge Base

The Different Methods of Loading an Image in QML

by Administrator ‎07-23-2012 12:25 PM - edited ‎08-14-2012 08:53 AM (4,494 Views)

This article describes different methods that can be used to load an image and give an example of when you should use them.

 

Asynchronous Loading

 

This should be used as much as possible, especially for dynamic content like a profile picture in a list item.
Simply specify the relative path from the asset directory like this (in the example below the image is placed directly in asset folder in the BlackBerry® Native SDK project).

 

ImageView {
    imageSource: "a.png"   
}

 

Synchronous Loading


Synchronous loading should be used when you need the image to be fully loaded before it shows up in the UI. Background images or images used in custom controls should all load synchronously. Note that this will lock the Server thread temporarily so it’s especially important in list items to avoid this as much as possible.

 

ImageView {
    imageSource: "asset:///a.png"   
}

 

Nine Slicing 

 

All nine sliced images are Synchronously loaded. You use nine slicing when you want to stretch an image.

 

ImageView {
    imageSource: "asset:///a"   
}

 


Load using Absolute path

 

It’s also possible to load an image using an absolute path. It’s not as common but when it’s used it’s usually to get the path to a shared directory like Image folder or Data. Note that this loads the image asynchronously.

 

ImageView {
    imageSource: "file:///valid/path/from/the/root/a.png"   
}

Note: Hard coding the full path should not be done; if you need the fully qualified URI then it can be dynamically generated at run time using a utility like QDir. 

 

More Information

Using Images in Cascades


Contributors