Setting a remote image to backgroundImage of a button

I am working on android using the latest Titanium . I am trying to set the backgroundImage of a button using setBackgroundImage() . However the image is fetched from a remote server . Here is what I am doing exactly .

File 1 : var imagehelper = require('/globals/local-utils/imagehelper');

var btn = Ti.UI.createButton({ left : 37, top : 84, width : 58, height : 58 });

imagehelper.imagehelper.loadImage(btn,'backgroundImage','bt_edit_n.png');

File 2 : loadImage : function(view, property, imgname) { var http = require('/globals/remote-utils/http');

    http.populateRemoteImage(view, property, 'Serverip/foldername/'+imgname);
}

File 3 exports.populateRemoteImage = function(view, property, url) {

// Create the HTTP client to download the asset.

var xhr = Ti.Network.createHTTPClient();

xhr.onload = function() {
    if (xhr.status == 200) {

        switch(property) {
            case 'backgroundImage':
                view.setBackgroundImage(xhr.responseData);
                break;
            case 'backgroundFocusedImage' :
                view.setBackgroundFocusedImage(xhr.responseData);
                break;
            case 'backgroundSelectedImage' :
                view.setBackgroundSelectedImage(xhr.responseData);
                break;
            case 'backgroundDisabledImage' :
                view.setBackgroundDisabledImage(xhr.responseData);
                break;
            case 'Image' :
                view.setImage(xhr.responseData);
                break;
            default:
                view.setImage(xhr.responseData);
                break;

        }
    };
};

// Issuing a GET request to the remote URL
xhr.open('GET', url);
// Finally, sending the request out.
xhr.send();

};

can someone tell me if this is correct approach , or we cant set the image like I am doing above , ie : passing the responseData directly . Do I have to compulsorly cache the image on the system and then use it ??

Hello Saurabh,

i am setting image to imageView like this

function DownloadImage(imgView, url) {
 
    Ti.App.fireEvent('show_indicator');
    var xhr = Titanium.Network.createHTTPClient({
        onerror : function(e) {
 
            Ti.App.fireEvent('hide_indicator');
        },
        onload : function(e) {
 
            if (this.status == 200) {
                imgView.image = this.responseData;
                Ti.App.fireEvent('hide_indicator');
            }
        }
    });
 
    xhr.setTimeout(120000);
 
    xhr.open('GET', url);
 
    xhr.send();
 
}

and call this function like

DownloadImage(imgView, 'your Image Url');

and this is working fine for me.....

i think difference is of

xhr.setTimeout(120000);

so just try this...hope this will help you......

you can not set a blob to backgroundImage property, also currently, you can not set a remote url for backgroundImage property. in your case, when you get the response,save the responseData to the local file, and then use the local file as the backgroundImage