Search code examples
backbone.jscordovacordova-plugins

Image not appear using cordova plugin

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

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.

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

Solution

  • 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%;" />