How to reference images within html code which is a document couchdb

Question

I'm working on an off-line app based on PhoneGap Build (a single page app). To update some contents of certain sections I would use replication from a CouchDB server to PouchDB on the app. I'm thinking of these sections as CouchDB documents that contain html code and necessary images as attachments. The question then is: how do I keep aligned the paths of the images in HTML and those used for attachments in CouchDB?

Answer 1

Probably the easiest way to keep DOM images synced with PouchDB attachments is to pull out the attachments as a Blob. blob-util can be very helpful for working with blobs, but it's typically as simple as:

// fetch the document and attachments
db.get('doc', {
  attachments: true,
  binary: true
}).then(function (doc) {
  // get the blob from the document
  var blob = doc._attachments['attachment.png'].data;
  // convert the blob to a url
  var url = blobUtil.createObjectURL(blob);
  // set the url on the `<img>` tag
  img.src = url;
}).catch(console.log.bind(console));