时间戳

首页 > 解决方案 > Ionic3，在android上显示来自sd（或任何）存储的图像

android - Ionic3，在android上显示来自sd（或任何）存储的图像

问题描述

我正在开发一个应用程序，该应用程序从外部 api 获取图像，然后将它们保存到设备以供以后离线使用，这是必不可少的。目前这是通过cordova-plugin-filetransfer完成的。它们现在存储在我的测试设备上的cordova.file.externalRootDirectory中 - 我可以看到它们并且文件没问题。

现在我想在页面中显示这些图像，但无论如何我都这样做了 - 没有任何效果。所以在结束今天的事情之前，我想我会问一下。

<img src="{{director.data_dir}}{{project.picture_path}}" /><br />
<p>{{director.data_dir}}{{project.picture_path}}</p>
<img [attr.src]="director.display_path(project.picture_path)" /><br />
<p>{{director.display_dir}}{{project.picture_path}}</p>

它们都不起作用。我尝试了其他几种方法，但仍然没有图像。director.display_path() 会从路径中删除file://，因为我已经读过我需要这样做以消除此错误：

Not allowed to load local resource: file:///storage/emulated/0/

好吧，伙计们，我做错了什么？我还应该做什么？

标签： androidimageionic3storage

解决方案

我有同样的问题，这就是我解决的方法。您需要 DomSanitizer 和文件：安装 ionic-native/file ( https://ionicframework.com/docs/native/file/ )

假设您有 2 个参数：

mypath = "file:///emulated/0/Android/data/... .../yourfolder/"

myimage = "你的图片.jpg"

在 page.html 文件中声明为：

<img [src]="cop">

然后在 page.ts 文件中： - 导入 DomSanitizer 和文件

import {DomSanitizer} from '@angular/platform-browser'
import { File } from '@ionic-native/file';

  • 在构造函数（）中注入它们：

    构造函数（私有文件：文件，私有清理程序：DomSanitizer）

  • cop的设定值：

getSanitizedImage(path, imageName){
      this.file.readAsDataURL(path, imageName)
      .then((data)=>{
        let sanitized = this.sanitizer.bypassSecurityTrustUrl(data);
        this.cop=sanitized;
      })
      .catch((err)=>{
        console.log("error: " + JSON.stringify(err));
      });
  }

现在，只需调用 getSanitizedImage(mypath, myimage)，您的变量“pos”将被更新，<img>对象将显示您的图像

推荐阅读