Snehal Snehal - 2 months ago 11
jQuery Question

Display image from its path stored in database

I want to display an image from the JSON object and the path of the image stored in MySQL database.

I have user table which contains:


  • userid

  • username

  • user_img_path

  • user_address



Now, I'm firing a query using PHP like:

SELECT `user_id`, `username`,`user_img_path` FROM `users`


And I store the output in an array
$rows
and encode this array into JSON as

json_encode($rows);


and I call this PHP file in my jQuery's
ajax
call and get JSON output. I can display other info properly, but the problem is that I couldn't display the image in HTML using jQuery
ajax
.

function callAjax1()
{
$.ajax({
url: 'userApi.php',
data: "",
dataType: 'json',
success:function(rows)
{
$.each(rows,function(i,item)
{
var user_id=rows[i].user_id;
var user_name=rows[i].user_name;
var user_img_path=rows[i].user_img_path;
console.log(user_id,user_name,user_img_path);
$("#poll_left_body").append('<a href="#"> <img src=\https://url/"'+user_img_path+'<label id="user_name" rel="tooltip" title=" Edward 11,356" style="color:black;">'+user_name+'</label></a><a href="/twitter/bootstrap/network" class="social-count">11,356</a>');
});
}
});
}

srs srs
Answer Source

try to put user_img_path into variable and use javascript

var img = document.createElement("img");
img.src = user_img_path;  
var body = document.body;  // use element where you want to display image
body.appendChild(img);