如何使用ionic离线显示离线图像

时间:2016-04-30 09:35:07

标签: ionic-framework

我有一个gallery模块,该模块中实现的功能如下

- getting the file path from the server using ajaxrequest
- the response will be json object of all image file path
- setting the filepath in image src attribute

由于我们正在使用ajax请求,因此图像仅以在线模式加载。 所以如何实现功能,以便图像也应该在离线状态下显示。

3 个答案:

答案 0 :(得分:0)

您可以考虑从服务器返回图像作为base64字符串,并将它们存储在localstorage中。 在视图上使用data-ng-src指令。 在您的控制器中检查是否没有连接并从localstorage中设置base64字符串,如下所示:$ scope.data.image_url =

答案 1 :(得分:0)

在加载一次图像后,最好的方法是获得它的base64表示,然后将其保存到磁盘。

在此处获取图像的base64表示: Get image data in JavaScript?

使用ng-cordova / ionic native将base64数据写入磁盘,使用Cordova文件插件将writeFile方法写入磁盘。 http://ngcordova.com/docs/plugins/file/

writeFile(path, file, data, replace)

答案 2 :(得分:0)

这里有一些很好的答案,我想继续......

我建议您在下载原始文件后使用 PouchDB 作为 base64和/或Blob 数据的缓存(我的一个应用程序对mp3数据做同样的事情)转换为Blob)。然后,您可以实现一种方法,在发出网络请求之前检查映像的缓存。

Nolan Lawson为这些二进制转换创建了一个优秀的库:https://github.com/nolanlawson/blob-util

在初始下载后,只需将base64字符串保存到PouchDB实例,然后您可以在应用程序到达网络之前检查该数据。

请注意iOS Safari上的存储限制(默认约为50mb)......