title: Angularjs: How to set Image data to IMG tag
body: <p>Please let me elaborate the issue.</p>
  
  <p>I am fetching user profile pic by hitting an api that is returning image as data as shown below in the screen shot</p>
  
  <p><a href="https://i.stack.imgur.com/t8Jtz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t8Jtz.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/pxTUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pxTUS.png" alt="enter image description here"></a></p>
  
  <p>I can not se the api url in the IMG tag src because I need to pass <code>access token</code> in the <code>headers</code> with the get request.</p>
  
  <p><strong>Here is the code that I am doing</strong></p>
  
  <pre><code>vm.getDp = function () {
      if (vm.userDetails.hasDp) {
          userService.getProfilePic(vm.userDetails.id, vm.userDetails.profileImageUrl, accessToken)
              .then(function (data) {
                  $("#theDp").attr('src', 'data:image/jpg;base64,' + data);
              }, function (error) {
  
              });
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/IlWxh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IlWxh.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/06G5M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/06G5M.png" alt="enter image description here"></a></p>