The Different Methods of Loading an Image in QML

by BlackBerry Development Advisor ‎07-23-2012 12:25 PM - edited ‎08-14-2012 08:53 AM (5,846 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