How to show a picture stored as an pouchDB attachment using Angular in Ionic app
<p>I'm making a mobile app using Ionic and pouchDB. In the DB I keep users data with their photos stored as attachments.
I want to make a list with users photos and names.
With getting names I have no problem but I can't figure out how to show the users photo in the list.</p>

<p>Records in the database look like this:</p>

<pre><code>{
  "_id": "1458320559128",
  "_rev": "2-cc9bc75fffa165497a5448e63d7bc21f",
  "firstName": "John",
  "familyName": "Doe",
  "gender": "male",
  "email": "sgasd@dfdfvg.ds",
  "phone": "423156523",
  "address": "blah",
  "country": "Venezuela",
  "city": "Whatever",
  "_attachments": {
    "johndoe947.jpg": {
      "content_type": "image/jpeg",
      "revpos": 2,
      "digest": "md5-Cw5m/SPn/cwtIguKKTcJDg==",
      "length": 24296,
      "stub": true
    }
  }
}
</code></pre>

<p>To show the list I use this view:</p>

<pre><code>&lt;ion-view view-title="Admin Area"&gt;
  &lt;ion-content&gt;
    &lt;ion-list&gt;
        &lt;ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="customer in customers" type="item-text-wrap" href="#/tab/customers/{{ customer.id }}"&gt;
            &lt;img ng-src="{{customer.photo}}"&gt;
            &lt;h2&gt;{{customer.firstName}} {{customer.familyName}}&lt;/h2&gt;
            &lt;i class="icon ion-chevron-right icon-accessory"&gt;&lt;/i&gt;
        &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
&lt;/ion-view&gt;
</code></pre>

<p>And I retrieve the date using this controller:</p>

<pre><code>.controller('MyCtrl', function($scope, PouchDB) {

  $scope.customer = {};
  $scope.customers = [];
  var attachments;

  localDB.allDocs({
    include_docs: true,
    attachments: true
  }).then(function(result) {
    for (var i = 0; i &lt; result.rows.length; i++) {
      attachments = result.rows[i].doc._attachments;
      if (typeof attachments === 'undefined') { //if there is no attachment I put standard avatar. And this actually works OK.
        var attch = "/img/nobody.jpg";
      } else {
        for (photoFileName in attachments) { break; }   //so I take the first attachment if there was more...

        //this part is a mistery (and of course doesn't work) - how can I get attachment from the DB and directly show it on the page?
        attch = localDB.getAttachment(result.rows[i].doc.id, photoFileName)
          .then(function (blob) {
            var url = URL.createObjectURL(blob);
            var img = document.createElement('img');
            img.src = url;
            return img;
          }).catch(function (err) {
            console.log(err);
          });
      }


      var obj = {
        "id": result.rows[i].doc._id,
        "firstName": result.rows[i].doc.firstName,
        "familyName": result.rows[i].doc.familyName,
        "attch": attch
      }
      $scope.customers.push(obj);
      $scope.$apply();
    }
  }).catch(function(err) {
    console.log(err);
  });
</code></pre>

<p>I was reading PouchDB documentation many times and using their examples I made something working to some extend. But it's not what I want:</p>

<pre><code>$scope.showPic = function(id) {
    localDB.get(id, {attachments: true}).then(function(doc) {
      attachments = doc._attachments;
      for (photo in attachments) { break; }
    }).then(function() {
      return localDB.getAttachment(id, photo);
    }).then(function (blob) {
      var url = URL.createObjectURL(blob);
      var img = document.createElement('img');
      img.src = url;

      var elem = document.getElementById(elemid);
      elem.appendChild(img);

    }).catch(function (err) {
      console.log(err);
    });
  }
</code></pre>

<p>Using this above I can actually put a photo into some element with ID elemid when I call the function in the view like this: {{ showPic(id) }}
But I don't think it's a good way to do it.</p>