Wie man Bild von der Datenbank lädt, die jquery ajax in asp.net verwendet

Question

Ich erstelle Kommentarsystem in ASP.Net durch jQuery AJAX, aber ich steht vor einem Problem des Ladens von Bildern von der Datenbank. Ich habe 3 Tabellen in der Datenbank:

1. Userregistrierung (uid (PK), Benutzername ....)
2. Profil (das Profil (PK), uid (FK), fulname, UserPic ...)
3. Kommentar (cmntID (PK), cmntText, uid (FK) ....)

das folgende ist die 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); 
     } 

Hier ist das Problem mit item.userPic w Das ist innerhalb der Schleife. item.username und item.cmntText funktioniert gut, aber item.userPic funktioniert nicht. Wenn ich jedoch auf ein anderes Attribut der Profiltabelle wie fulname zugreife, dann funktioniert es. Ich kann einfach nicht auf userPic der gleichen Tabelle zugreifen.

Dies ist der Code hinter 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); 
} 

Dies ist das Ergebnis, das ich bekommen:

Answer 1

Wenn Sie eine Base64-codierte Zeichenfolge abrufen, die 'src' gesetzt Attribut des Image-Tags mit der Base64-codierten Zeichenfolge. Zum Beispiel:

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

Falls Sie den Pfad des Bildes abrufen, müssen Sie das Bild mit dem Ajax-Aufruf zum Abrufen und die HttpContext.Current.Server.MapPath("~/") in asmx verwenden, wo Sie den Speicherort Ihrer Bildordner angeben müssen.

den folgenden Code-Schnipsel auf eine Funktion oder Web-Methode hinzufügen,

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

Hinweis: Ersetzen Sie die ‚Uploads‘ nach Ihren Bedürfnissen, die der Ordner ist, wo Ihr Bild vorhanden ist. Beachten Sie auch, dass ich den 'DocumentName' übergebe, der eigentlich nur der Dateiname ist.

Answer 2

Sie müssen auf eine andere Seite oder Handler, der Benutzer-ID und gibt ein Bild akzeptiert, funktioniert der Code sollte wie folgt:

Im JavaScript-Block, wird sich ändern Sie den Teil, der die Bild-Tag zeichnet

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

unter

dann einen neuen HTTP-Handler als erstellen

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

Dann web.config den Handler in registrieren