title: display photo in UI from ajax called data
body: <p>I have the below img tag :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img alt="no pic to display"  class="profile__image" id ="popupPic" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to display a photo retrieved from ajax call :</p>
  
  <p>photo looks like this in browser console :
  <a href="https://i.stack.imgur.com/Dj8mO.png" rel="nofollow noreferrer">coded pic</a></p>
  
  <p>this is my jquery that I have tried to use here :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var pic=(data.split("photo:")[1]).split("manager:")[0];
  document.getElementById("popupPic").src ='data:image/png;base64, + pic';</code></pre>
  </div>
  </div>
  </p>
  
  <p>the php file used to make the ajax call to active directory :<a href="http://pastebin.com/tSRxwQL8" rel="nofollow noreferrer">http://pastebin.com/tSRxwQL8</a></p>
  
  <p>I am able to display other attributes from the console such as title ,mail ,department etc by calling the jQuery as follows :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> $('.leaderboard li').on('click', function () {
   $.ajax({
   url: "../popupData/activedirectory.php", 
   type: "POST",
   data: {id:$(this).find('.parent-div').data('id')},
   success: function(data){
   console.info(data);
   $('#popup').fadeIn();
   var email=(data.split("mail:")[1]).split("title:")[0];
   $('#emailOfUser').html('Email:'+ email); 
   var dept=(data.split("department:")[1]).split("manager:")[0];
   $('#departmentOfUser').html('Department:'+ dept);
   var pic=(data.split("photo:")[1]).split("manager:")[0];
   $('#popupPic').append(pic);
   },
   error: function(){
   alert('failed, possible script does not exist');
   }
   });
   });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The browser console shows that an ajax call returns this : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;p&gt; sn: xxxxxx&lt;br/&gt;givenname: xxxxx&lt;br/&gt;
     employeeID: 0050&lt;br/
     &gt;distinguishedName: CN=xxxx     xxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxxxxx,DC=com&lt;br/&gt;
     displayName: Mark Hewettk&lt;br/&gt;sAMAccountName: xxxxxxx&lt;br/&gt;
     department: xxxxx&lt;br/&gt;manager: CN=xxxxxx xxxxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxx,DC=com
     &lt;br/&gt;
     mail: mhewettk@abc.com&lt;br/&gt;
     title: xyz&lt;br/&gt;
     photo :����%&amp;'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>the problem is that I am unable to display the thumbnail photo</strong> i.e the photo tag above.</p>
  
  <p><strong>kindly help me on how to fetch the photo from the ajax data.</strong></p>