Code for displaying image in Phonegap mobile application from server
I had a requirement to display the image in phonegap mobile application from Web server using JSON.
I could not find any solution over the net. My solution is below.
1) Add an images folder under Webcontent folder and add a jpeg image in it.
(Added the image picture5.jpg in the folder)
2) Mention the Exact location of the image in the JSON String just like string or int value in the server side code.
EX: productMap.put("LOCAT", "http://192.178.3.2:9080/SalesManager/images/picture5.jpg");
3) Create a new Javascript file picShow.js to get the image from the server using JSON.
function getPicture()
{
$
.getJSON("http://192.178.3.2:9080/SalesManager/getImage.action",
{}, function(data) {
processPictureData(data);
});
}
function processPictureData(data)
{
$.each(data.PICTURE, function(i, product) {
$('#productPic').attr('src', product.LOCAT);
});
}
4) Create a new html to display the picture.
<!DOCTYPE HTML>
<html>
<head>
<title>Picture POC</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="scripts/phonegap-1.0.0rc2.js"></script>
<script src="scripts/jquery-1.6.4.min.js"></script>
<script src="scripts/jquery.mobile.min.js"></script>
<script src="scripts/database.js"></script>
<script src="scripts/synchronizeData.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="scripts/picShow.js"></script>
</head>
<body>
<h1>Picture Demo</h1>
<button onclick="getPicture()">click here</button>
<div data-role="">
<img id="productPic">
</div>
</body>
</html>
