title: How to load image from database using jquery ajax in asp.net
body: <p>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:</p>
  
  <ol>
  <li>UserRegistration(uid(PK),username....)</li>
  <li>Profile(profileID(PK),uid(FK),fulname,userPic...)</li>
  <li>Comment(cmntID(PK),cmntText,uid(FK)....)</li>
  </ol>
  
  <p>The following is the jQuery AJAX code:</p>
  
  <pre><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 += '&lt;div class="q2" style="background-color: red"&gt;' +
                     '&lt;img src="' + item.userPic + '" class="img-circle" width="32px" height="32px" /&gt;'+
                     '&lt;span&gt;' + item.username + '&lt;/span&gt;' +
                     '&lt;p&gt;' + item.cmntText + '&lt;/p&gt;' + '&lt;/div&gt;';
              });
              loadPost.html(trHtml);
          }
  </code></pre>
  
  <p>Here is the problem with <code>item.userPic</code> which is inside the loop. <code>item.username</code> and <code>item.cmntText</code> works well but <code>item.userPic</code> is not working. However when i access another attribute of the Profile table like <code>fulname</code> then it works. I just can't access <code>userPic</code> of the same table.</p>
  
  <p>This is the code behind in C#:</p>
  
  <pre><code>[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);
  }
  </code></pre>
  
  <p>This is the result that I get:</p>
  
  <p><a href="https://i.stack.imgur.com/5SBZf.png" rel="nofollow"><img src="https://i.stack.imgur.com/5SBZf.png" alt="enter image description here"></a></p>