ibm mobilefirst - How to retrieve images from existing database using sql/http adapter from worklight application -

i'm having existing database , have show list of images in worklight application user can select , adds cart.

the image column in database having path of images @ server. i.e "memory/toppings/nuts/hazelnuts.jpg" "memory/toppings/nuts/macadamia_nuts.jpg"

so how these images , show on worklight application.

what should concatenate server url , image path after retrieve database.

lets in database store this: "/uploads/original/6/63935/1570735-master_chief.jpg", concatenation this:

var url = "http://static.comicvine.com" + response.invocationresult.resultset[0].profileimg; $("#img1").attr("src", url); 

below working example.

upon clicking button, sql adapter procedure invoked , returns url stored in database. url inserted pre-existing img tag's src attribute, gets displayed.

you need take implementation , alter fit needs.

html:

<input type="button" value="insert image" onclick="getimageurl();"/><br> <img id="img1" src=""/> 

js:

function getimageurl() {     var invocationdata = {             adapter : 'retrieveimage',             procedure : 'retrieveimageurl',             parameters : []     };      wl.client.invokeprocedure(invocationdata,{         onsuccess : retrievesuccess,         onfailure : retrievefailure,     }); }  function retrievesuccess(response) {     var url = "http://static.comicvine.com" + response.invocationresult.resultset[0].profileimg;     $("#img1").attr("src", url); }  function retrievefailure() {     alert ("failure"); } 

alternate js:
code snippet shows how add several images dynamically created img tags.

function retrievesuccess(response) {     var url, i;     (i = 0; < response.invocationresult.resultset.length; i++) {         url = "http://static.comicvine.com" + response.invocationresult.resultset[i].profileimg;         $("#imgholder").append("<li><img src='" + url + "'/></li>");         // imgholder ul in html img tags appended to.     }; } 

adapter js:

var procedure1statement = wl.server.createsqlstatement("select profileimg users"); function retrieveimageurl() {     return wl.server.invokesqlstatement({         preparedstatement : procedure1statement     }); } 

adapter xml:

<procedure name="retrieveimageurl"/> 

in database:

table (users) | -- column (profileimg) ------ row contents: url pointing image, example: /myimg.png