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

我认为这更像是一个角色问题，而不是一个PouchDB问题，但我会尽力回答。

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

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

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

现在，您可以将图片网址直接附加到<img>标记，而不是将其附加到您的范围，然后更新范围：

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

然后你就像一个HTML块一样：

<img src="myScope.imgTag"/>

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

Answer 2

我使用离子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：

附件teste：controllers.js：60 斑点：http://localhost:8101/a37abb3d-60b1-45a6-9c7c-6516a7c83fce

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

2 个答案: