我正在使用两种类型的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%;" />
我关注此网站但仍无法正常工作。
我已经在利益流中对此问题进行了一些研究,仍然是相同的。
答案 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%;" />