如何在 Ionic 应用程序中使用 Angular 显示存储为 pouchDB 附件的图片

Question

我正在使用 Ionic 和 pouchDB 制作移动应用程序。在数据库中，我将用户数据与他们的照片一起存储为附件。我想制作一个包含用户照片和姓名的列表。获取名字没问题，但我不知道如何在列表中显示用户照片。

数据库中的记录如下所示：

{
  "_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
    }
  }
}

为了显示列表，我使用了这个视图：

<ion-view view-title="Admin Area">
  <ion-content>
    <ion-list>
        <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 }}">
            <img ng-src="{{customer.photo}}">
            <h2>{{customer.firstName}} {{customer.familyName}}</h2>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

然后我使用这个控制器检索日期：

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

我多次阅读 PouchDB 文档，并使用他们的示例做了一些工作。但这不是我想要的：

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

当我像这样在视图中调用函数时，使用上面的方法我实际上可以将照片放入 ID 为 elemid 的元素中：{{ showPic(id) }} 但我认为这不是一个好方法。

Answer 1

我会说这更像是一个 Angular 问题而不是 PouchDB 问题，但我会尽力回答。

基本上 PouchDB 为您提供了一种异步提供图像 URL 的方法：

doStuff().then(function (blob) {
  var url = URL.createObjectURL(blob);
  // now I have a url
});

即如果您的远程服务器以某种方式给您 URL（例如通过 $http），这与发生的事情是一样的。我发现将 PouchDB 视为远程服务器会有所帮助，因为它是异步的。

现在，您可以将图像 URL 直接附加到 <img> 标签，而不是附加到您的范围，然后更新范围：

myScope.imgTag = url;
$rootScope.$apply();

那么你就有了一个 HTML 块，例如：

<img src="myScope.imgTag"/>

请注意，如果您将 PouchDB 的承诺包装在 $q.when() 中，那么 $rootScope.$apply() 会自动为您完成。祝你好运！

Answer 2

我正在使用 ionic 1.3 pouchDB 与 couchDB 同步，但无法显示图像，请参见此处的示例：.

控制器:

$pouchDB.getAttachmentById('main','bares.jpg').then(function(response) {
var url = URL.createObjectURL(response);
$scope.imgTag = url;

console.log("attachments teste:")
//console.log(response);
console.log($scope.imgTag);

});

服务:

this.getAttachmentById = function(docId, attName) {
    var deferred = $q.defer();
    console.log("getAttachmentById: " + docId+" " + attName)
    database.getAttachment(docId,attName).then(function(response) {
      deferred.resolve(response);
      console.log("/************ ");
      console.log(response);
      console.log("**************/");
    }).catch(function(error) {
    deferred.reject(error);
});
return deferred.promise;

}

查看:

html
img src="scope.imgTag"

console.log:

attachments teste: controllers.js:60 blob:http://localhost:8101/a37abb3d-60b1-45a6-9c7c-6516a7c83fce

如何在 Ionic 应用程序中使用 Angular 显示存储为 pouchDB 附件的图片

How to show a picture stored as an pouchDB attachment using Angular in Ionic app

ionic-framework

pouchdb