Ionic 4：如何在设备上保存来自firebase存储的离线模式的图像

Question

我使用SQLite本机插件来存储文本内容，但我也需要使用图像！ （适用于离线模式）

使用angular / ionic 4将图像转换为base64字符串无效，所以我的问题是：

How to download the images with Native file transfer plugin provided by ionic/Cordova from images urls that comes from Firebase

我已经阅读了文档，但它是基本的，并没有给予太多！

DOCS提供的代码:(我不了解file.pdf的下载方法！图片可以附带任何扩展名，如jpg / png ..etc）

download() {
  const url = 'http://www.example.com/file.pdf';
  fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
    console.log('download complete: ' + entry.toURL());
  }, (error) => {
    // handle error
  });
}

Answer 1

下载方法上的file.pdf不是问题，因为您可以从API响应获得带有扩展名的整个文档/图像名称。

例如

for (let i = 0; i < res.data.length; i++) { 
     let fileName = res.data[i].name;
     let url = 'http://www.example.com/' + res.data[i].name;
     const _fileTransfer: FileTransferObject = this._fileTransfer.create();
     _fileTransfer.download(url, this._file.dataDirectory + fileName).then((entry) => {
         console.log('download complete: ' + entry.toURL());
     }, (error) => {
         console.log(error);
     });
}

然后，您可以使用normalizeURL显示图像，给出表示URL的字符串returns the URL path after stripping the trailing slashes。

import { normalizeURL } from 'ionic-angular';

{'filePath': normalizeURL(result[i].fileName)

<img src="{{filePath}}">

Answer 2

您可以在这里使用LocalStorage，更多信息：https://ionicframework.com/docs/building/storage

几个星期前我用来存储图像的一个例子。

 if (this.platform.is('ios')) {
      this.fileName = 'Image';
       this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;

    } else if (this.platform.is('android')) {
      this.fileName = 'Image';
        this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;

Answer 3

Firebase具有很酷的offline功能。尝试查询必要的数据，然后使用它。

否则使用这个plugin。

Answer 4

感谢您的回复，但我已经想通了！

我已经将我的图像存储在手机上然后通过使用Cordova插件转换为base64图像，你可以找到here然后我将base64图像添加到我的存储文本内容。