Question

我正在开发一个应用程序，该应用程序从外部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/

好的，我在做什么错？我该怎么办？

Answer 1

我遇到了同样的问题，这就是我的解决方法。您需要DomSanitizer和File：安装ionic-native / file（https://ionicframework.com/docs/native/file/）

假设您有2个参数：

mypath =“文件：///仿真/ 0 / Android /数据/ ... ... /您的文件夹/”

myimage =“ yourimage.jpg”

在page.html文件中声明为：

<img [src]="cop">

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

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

将它们注入Constructor（）：

构造函数（私有文件：文件，私有消毒剂：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>对象将显示您的图像

Ionic3，在Android上显示SD（或任何）存储中的图像

1 个答案: