如何在 asp.net 中使用 jquery ajax 从数据库中加载图像答案

【问题标题】：How to load image from database using jquery ajax in asp.net如何在 asp.net 中使用 jquery ajax 从数据库中加载图像
【发布时间】：2016-10-13 07:40:30
【问题描述】：

我正在通过 jQuery AJAX 在 ASP.Net 中创建评论系统，但我遇到了从数据库加载图像的问题。我在数据库中有 3 个表：

UserRegistration(uid(PK),username....)
个人资料(profileID(PK),uid(FK),fulname,userPic...)
评论(cmntID(PK),cmntText,uid(FK)....)

以下是jQuery AJAX代码：

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

这是循环内部的item.userPic 的问题。 item.username 和 item.cmntText 运行良好，但 item.userPic 不起作用。但是，当我访问 Profile 表的另一个属性（例如 fulname）时，它就可以工作了。我就是无法访问同一张表的userPic。

这是 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);
}

这是我得到的结果：

【问题讨论】：

我们需要更多细节。 userpic 是存储为字符串路径还是 base64 编码的字符串？你得到的价值是什么？您期望的价值是多少？
我认为他变成了一个json作为响应。那么请您检查您的 console.logs 并检查图像路径（在新标签中打开 URL）以检查可用性。
@Rory 他的 userPic 存储为字符串路径，所以我只想使用 jquery ajax 显示来自数据库的存储图像
console.log(item.userPic) 在console 登录什么？

标签： c# jquery asp.net ajax

【解决方案1】：

如果您要检索 base64 编码字符串，请将图像标签的“src”属性设置为 base64 编码字符串。例如：

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

如果您要检索图像的路径，则必须使用 ajax 调用检索图像并在 asmx 中使用HttpContext.Current.Server.MapPath("~/")，您必须在其中指定图像文件夹的位置。

将以下代码 sn-p 添加到函数或 web 方法中，

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

注意：根据您的需要替换“上传”，即您的图像所在的文件夹。另请注意，我传递的“DocumentName”实际上只是文件名。

【讨论】：

我使用的是字符串路径而不是 base64 .....如果你不介意请用一个例子解释一下我真的需要它....而且我正在存储这样的图像: fileupload.PostedFile.SaveAs(Server.MapPath("~/images/") + fileupload.FileName);
这会使整个请求太慢，而且它的大小会很大，特别是如果有很多 cmets

【解决方案2】：

您必须到另一个接受用户 ID 并返回图像的页面或处理程序，代码应如下所示：

在 JavaScript 块中，您将更改绘制图像标签的部分

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

然后创建一个新的 HTTP Handler 如下

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

然后在web.config中注册handler

【讨论】：