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

New Contributor
Posts: 2
Registered: ‎05-15-2012
My Device: Blackberry 10 Dev Alpha
My Carrier: None
Accepted Solution

Loading image from URL

I'm new to Blackberry 10 development and I'm trying to load an image from the web into a ImageView control on a ListView.


My QML for the ListView looks like this:

ListView {
    id: titlesListView
    objectName: "titlesListView" 

    listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
                layout: StackLayout {
                    layoutDirection: LayoutDirection.LeftToRight
                ImageView {
                    imageSource: ListItemData.boxArt
                Label {
                    text: ListItemData.title
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal

Then I use a GroupDataModel class to provide the data:

GroupDataModel *model = new GroupDataModel(QStringList() << "title" << "boxArt");
QVariantMap map;
map["title"] = "Test Title";
map["boxArt"] = "http://www.foo.com/bar.jpg";
ListView *listView = findControl<ListView>("titlesListView");


At runtime I am getting this error in the logs:

Unsupported scheme (http) used in url


Does this really mean that it's not possible to load an image from a URL or am I going about it in the wrong way?

Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Loading image from URL

I started replying this morning, then realized I was merely speculating and should let someone who knows the answer respond.

Nobody has, so I'll speculate. Smiley Happy

I think there's a good chance, assuming this is supposed to work (or does, for example, in the equivalent QtGui classes), that this is simply another unfinished feature in Cascades and you'll have to wait, or reimplement it in custom code with a background loader thread or something like that.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: Loading image from URL

from my discussions at BB10Jam I know that this is work-in-progress and a sample app will follow soon.

It's important for me, too to get Images from URL. In my case a JSON of Conference-Speakers contains the Image URL's of the Speakers I want to display in a List.

ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner
Posts: 5
Registered: ‎04-10-2012
My Device: Curve
My Carrier: Telenor

Re: Loading image from URL

Ekke is right, Cascades currently does not support loading images from URL. It's a very reasonable feature but we just didn't have time to put it in yet.


It should be pretty simple to build your own class to do this for now, like Peter9477 suggests.





Posts: 188
Registered: ‎01-27-2012
My Device: playbook
My Carrier: ...

Re: Loading image from URL

With standard qml you can use Qt.resolvedUrl ( http://doc-snapshot.qt-project.org/4.8/qml-qt.html#resolvedUrl-method

And in Qt c++ use QUrl http://qt-project.org/doc/qt-4.8/QUrl.html

Good Luck!



New Developer
Posts: 4
Registered: ‎05-21-2012
My Device: Dev Alpha
My Carrier: Meteor

Re: Loading image from URL

There is some nice code here that shows you how to download data from a URL and load it into a QPixmap. It should be easy enough to wrap it up in a class to do what you want.



New Contributor
Posts: 2
Registered: ‎05-15-2012
My Device: Blackberry 10 Dev Alpha
My Carrier: None

Re: Loading image from URL

OK I was finally able to get this working.


Here's some sample code to show how it was done:

    //QNetworkAccessManager m_manager;
    connect(&m_manager, SIGNAL(finished(QNetworkReply*)),
         this, SLOT(replyFinished(QNetworkReply*)));

void App::setImage(const QString &url)

void App::replyFinished(QNetworkReply* reply)
    QByteArray data = reply->readAll();

    QImage qimage;

    int width = qimage.width();
    int height = qimage.height();
    PixelBufferData pixelBuffer = PixelBufferData(PixelBufferData::RGBX, width, height, width, qimage.bits());

    Image image = Image(pixelBuffer);


Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus

Re: Loading image from URL

How did you bind the image to the ListItemComponent? 

New Contributor
Posts: 9
Registered: ‎02-02-2012
My Device: 9700
My Carrier: china mobile

Re: Loading image from URL

[ Edited ]



I used same code, it can load image successful, but some surprised happened, when i load the below image by the follow code, it display the image which change blue to red, and the background change the black but actually it is black. please see the attches.


void CascadeImage::handleNetworkData(QNetworkReply *reply)
if (!reply->error()) {
// Let's get ALL the data
const QByteArray response(reply->readAll());
QImage QImg;
if (!QImg.isNull())
PixelBufferData pbd(PixelBufferData::RGBX, QImg.width(), QImg.height(), QImg.width(), QImg.bits());
// Cleanup


Here is the image url:





New Contributor
Posts: 6
Registered: ‎07-05-2012
My Device: BB10
My Carrier: Orange

Re: Loading image from URL

I'd love to see how this is done. I'm new to C++/QML so at the moment I don't quite understand how retrieving the image in C++ and binding to the datamodel/QML works.


It would be a very good candidate for a sample application, because it is such a common requirement.