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

Question

我使用 SQLite 原生插件 来存储文本内容，但我也需要使用图像来做到这一点！ （对于离线模式）

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

如何使用 ionic/Cordova 提供的 Native 文件传输插件从 Firebase 提供的图片 url 下载图片

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

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

您可以使用 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 2

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

否则使用这个plugin。

Answer 3

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

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

Answer 4

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}}">