Image not appear using cordova plugin

Question

I'm using two types of cordova plugin to store image into gallery and make retrieve it back.

• File: https://github.com/apache/cordova-plugin-file
• Camera: https://github.com/apache/cordova-plugin-camera

My project based on backbone.js. But the problem is, I got this weird problem last week. The image still can't appear on the next page after I click button. I got 2 pages, first page to store image into gallery after I capture picture using camera cordova plugin. Below is my code

page 1

javascript

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('image');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    localStorage.imageUrl = imageURI;
}

html

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button> <img id="image" name="image" src="" style=
"display:none;width:100%;" />

Then I want to retrieve back my image in my gallery using imageURI that I store into localStorage.imageUrl. I testing using hard corded imageURI, retrieve using console.log.

file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg

page 2

html

<img id="image" name="image" src="file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg" style="display:none;width:100%;" />

It didn't working.

So, I try inject imageURI into my view page (page 2) in programmatic way. I create a model and collection for imageURI so i can render it into my second page.

model

define(['underscore', 'backbone'], function(_, Backbone) {
    var linkModel = Backbone.Model.extend({
        defaults:{
            imageUrl: localStorage.imageUrl
        }
        });
    return linkModel;
});

collection

define(['underscore', 'backbone', 'model/link/linkModel'], function(_, Backbone, linkModel) {
    var linkCollection = Backbone.Collection.extend({
        model: linkModel
    });
    return linkCollection;
});

view

define(['jquery', 'underscore', 'backbone', 'model/link/linkCollection', 'text!modules/link/linkConfirmViewTemplate.html'], function($, _, Backbone, linkCollection, linkConfirmViewTemplate) {
    var LinkConfirmView = Backbone.View.extend({
        render: function() {
            var variables = {
                imageUrl: localStorage.imageUrl
            };
            var compiledTemplate = _.template(linkConfirmViewTemplate, variables);
            this.$el.html(compiledTemplate);
        }
    });
    return LinkConfirmView;
});
<img id="image" name="image" src="<%= imageUrl %>" style="display:none;width:100%;" />

I follow this site but still not working.

• http://backbonetutorials.com/organizing-backbone-using-modules/

I already doing some research for this issue in stakeoverflow, still same.

• http://docs.phonegap.com/en/3.0.0/cordova_camera_camera.md.html
• Phonegap - Choose Image From Gallery

Answer 1

Yes, I remove display:none on my html.

<img id="image" name="image" src="" style=
"display:none;width:100%;" />

to

<img id="image" name="image" src="" style="width:100%;" />