Question

I am working on an PhoneGap application in which I am saving user’s name , number and Email , after that I am displaying that data to another page in list – view. That has been done very successfully. But now when I want to store Image of user in my local Storage, I am getting the path of image instead of Image.

I am saving my data in this way :

<SCRIPT Language="JavaScript" charset="utf-8" type="text/javascript">

 var userName, userNumber, userEmail, userImage ;

 function showAndClearField(frm)
{


   userName = frm.name.value;
   userNumber = frm.number.value;
   userEmail = frm.email.value;
  if (frm.name.value == "" )
      {
        alert("Please enter your name!")
      }
  else if(frm.number.value == "")
  {

 alert("Please enter your number!")

 }
   else if(frm.email.value == "")
   {
     alert("Please enter your Email !")
   }
 else
{                

 alert("Name : " + userName + '\n' + " Number: " + userNumber + '\n' + "  Email: " + userEmail  )

 frm.name.value = ""
  frm.number.value = ""
  frm.email.value = ""


  var db = window.openDatabase("TestingDemo", "1.0", "PhoneGapTesting Demo", 200000);
   db.transaction(populateDB, errorCB, successCB);

  }


   function populateDB(tx)
     {

      tx.executeSql('INSERT INTO DEMO (id, data, userName, userNumber, userEmail, userImage) VALUES (1, "Third row", "'+ userName +'" , "'+ userNumber +'" , "'+ userEmail +'", "'+ userImage +'")');

      }

While displaying data I am using following code :

 var nameOfUser , numberOfUser , emailOfUser, imageOfUser;


  for (var i=0; i<len; i++)
  {
     nameOfUser = results.rows.item(i).userName;

     numberOfUser = results.rows.item(i).userNumber;

     emailOfUser = results.rows.item(i).userEmail;

     imageOfUser = results.rows.item(i).userImage;



    numArr.push({ name : nameOfUser  , number  : numberOfUser  , email : emailOfUser, image : imageOfUser });  


   }

 function createCheckboxes(){
     $("#createBtn").remove();

     $("#content").append('<fieldset id="cbFieldSet" data-role="controlgroup" style = "padding : 20px" >');




    var length = numArr.length;

    for(var i=0;i<length;i++)
     {


    $("#cbFieldSet").append('<input type="checkbox" name= "cb-'+i+'" id="cb-' + i +'" number = "'+numArr[i].name+'"/>  <label for= "cb-'+i+'">'  +   "Name :  " + numArr[i].name + ' <br>' + "Email : " + numArr[i].email  +' <br>' + " Number " +  numArr[i].number +' <br>' +  numArr[i].image + ' <br><br> </label>' );


   alert("List Created !");

   }

   alert("Out of For loop !");      

   $("#content").trigger("create");
   alert("Content Created !");
  $("#showBtn").css("visibility","visible");
  }

  function showSelectedNames(){
   var count = $("#cbFieldSet input:checked").length;
   var str = '';
   for(i=0;i<count;i++){
   str += ' '+$("#cbFieldSet input:checked")[i].value;
 }
 alert("You selected----"+str);
}


                </script>

How the view I am getting is :

Answer 1

i do not know about this particular program,

but i do know that you are passing the image location as an argument, (text).

the other arguments are also text, and you have no done anything differently with the image argument to have the UI display an image. maybe you are missing image tags, or an “getImage(location)” type function.

edit:

<img src="PATH" />

you need to put PATH as image location and this is what will display it.