如何在asp.net中使用jQuery Ajax从数据库加载图像

Question

I am creating comment system in ASP.Net through jQuery AJAX but I am facing a problem of loading images from the database. I have 3 tables in the database:

1. UserRegistration(uid(PK),username....)
2. Profile(profileID(PK),uid(FK),fulname,userPic...)
3. Comment(cmntID(PK),cmntText,uid(FK)....)

The following is the jQuery AJAX code:

function getcomment() {
    var postPlace = $('div.q1');
    $.ajax({
        url: '/WebForm1.aspx/GetComment',
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: 'json',
        type: 'POST',
        success: function (data) {
            var newData = jQuery.parseJSON(data.d);
            var trHtml = '';
            var loadPost = postPlace;

            $.each(newData, function (i, item) {
                trHtml += '<div class="q2" style="background-color: red">' +
                   '<img src="' + item.userPic + '" class="img-circle" width="32px" height="32px" />'+
                   '<span>' + item.username + '</span>' +
                   '<p>' + item.cmntText + '</p>' + '</div>';
            });
            loadPost.html(trHtml);
        }

Here is the problem with item.userPic which is inside the loop. item.username and item.cmntText works well but item.userPic is not working. However when i access another attribute of the Profile table like fulname then it works. I just can't access userPic of the same table.

This is the code behind in C#:

[WebMethod]
public static string GetComment()
{
    string connection = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;
    SqlConnection con = new SqlConnection(connection);
    SqlDataAdapter da = new SqlDataAdapter("select * from userregistration inner join comment on userregistration.uid=comment.uid inner join profile on comment.uid=profile.uid  order by cmntID DESC ", con);
    DataTable dt = new DataTable();
    da.Fill(dt);
    return JsonConvert.SerializeObject(dt);
}

This is the result that I get:

Answer 1

If you are retrieving a base64 encoded string, set the 'src' attribute of the image tag with the base64 encoded string. For example:

$("#img").attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

In case you are retrieving the path of the image, you have to retrieve the image using ajax call and use the HttpContext.Current.Server.MapPath("~/") in asmx where you have to specify the location of your image folder.

add the below code snippet to a function or web method,

string strdocPath;
        try
        {
            strdocPath = (Server.MapPath("~\\Uploads\\" + DocumentName));

            FileStream objfilestream = new FileStream(strdocPath, FileMode.Open, FileAccess.Read);
            int len = (int)objfilestream.Length;
            Byte[] documentcontents = new Byte[len];
            objfilestream.Read(documentcontents, 0, len);
            objfilestream.Close();
            string result = Convert.ToBase64String(documentcontents);
            return result;
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }

Note: Replace the 'Uploads' according to your needs which is the folder where your image exists. Also note that i'm passing the 'DocumentName' which is actually the file name only.

Answer 2

You have to another page or handler that accepts user id and returns an image, the code should works as below:

In the JavaScript block, you will change the part that draws the image tag

$.each(newData, function (i, item) {
                trHtml += '<div class="q2" style="background-color: red">' +
                   '<img src="/GetUserImage?userId=' + item.username + '" class="img-circle" width="32px" height="32px" />'+
                   '<span>' + item.username + '</span>' +
                   '<p>' + item.cmntText + '</p>' + '</div>';
            });

Then create a new HTTP Handler as below

public class UserImagesHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //Get username from from query string

        //Get binary data

        context.Response.ContentType = "image/jpeg";
        context.Response.BinaryWrite(bytes);
    }
}

Then register the handler in web.config