图像未出现使用cordova插件

时间:2014-03-21 10:42:09

标签: backbone.js cordova cordova-plugins

我正在使用两种类型的cordova插件将图像存储到图库中并将其检索回来。

我的项目基于backbone.js。但问题是,上周我遇到了这个奇怪的问题。单击按钮后,图像仍然无法显示在下一页上。在使用相机cordova插件捕获图片后,我有2页,第一页将图像存储到图库中。以下是我的代码

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

然后我想使用存储在imageURI中的localStorage.imageUrl在我的图库中检索我的图像。我使用硬编imageURI进行测试,使用console.log进行检索。

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

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

没用。

所以,我尝试以编程方式将imageURI注入我的视图页面(第2页)。我为imageURI创建了一个模型和集合,所以我可以将它渲染到我的第二页。

模型

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

集合

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

视图

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

我关注此网站但仍无法正常工作。

我已经在利益流中对此问题进行了一些研究,仍然是相同的。

1 个答案:

答案 0 :(得分:0)

是的,我在html上删除了display:none

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

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