CODEWITHSUNDEEP
phpmysqljsonjquery
Snehal
Snehal

Reputation: 57

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:

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>');
            });
        }
    });
}

Upvotes: 0

Views: 1195

Answers (2)

Sangeeta
Sangeeta

Reputation: 388

seems like you are not able to set the path for image. you can do following:

1) Make sure path you are getting from database is correct and try to hard code it and check image displays or not.

2) in case your path is right, you need to check what json output you are getting ? is it the same which is stored in database? to check you can use firebug(console tab)

3) if above steps are correct last and important is to check HTML render by your code. if the code is also correct . then you must be able to see image (if there is no further problem)

Hope it helps.

Upvotes: 0

srs
srs

Reputation: 68

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);

Upvotes: 1

Related Questions