Question

我在Ionic 3应用程序中使用管道来修改本地捕获图像的URL，以便它们可以显示在<img>标记中。这在iOS中完美运行。

但是在Android上，我在远程Web检查器中遇到以下错误：Not allowed to load local resource: file:///data/user/0/com.example.mobile/files/1527609310822.jpg。在通过DomSanitizer运行我的URL后，我甚至得到了这个问题（参见下面的代码）。

我尝试过的事情：

我设置了一个管道来正确修改本地URL以显示在模板中。在iOS上，它使用normalizeUrl，在Android上使用DomSanitizer.bypassSecurityTrustUrl：

import { Pipe, PipeTransform } from '@angular/core';
import { normalizeURL, Platform } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'localImage',
})
export class LocalImagePipe implements PipeTransform {
  constructor(private platform: Platform, private domSanitizer: DomSanitizer) { }

  transform(url) {
    console.log('input:', url);
    let result;
    if (this.platform.is('android')) {
      result = this.domSanitizer.bypassSecurityTrustUrl(url);
    } else {
      result = normalizeURL(url);
    }

    console.log('output', JSON.stringify(result));
    return result;
  }
}

进入管道的iOS网址：

file:///var/mobile/Containers/Data/Application/325C2BBA-FCA9-4838-974F-9F84BDF2F6F5/Library/NoCloud/1527606661016.jpg

iOS网址来自管道（工作）：

http://localhost:8080/var/mobile/Containers/Data/Application/325C2BBA-FCA9-4838-974F-9F84BDF2F6F5/Library/NoCloud/1527606661016.jpg

进入管道的Android网址（已知文件存在）：

file:///data/user/0/com.example.mobile/files/1527606953669.jpg

来自管道的Android网址：

{"changingThisBreaksApplicationSecurity":"file:///data/user/0/com.example.mobile/files/1527606953669.jpg"}

会发生什么：

1）我尝试在Android上使用DomSanitizer.bypassSecurityTrustUrl()。我收到错误：Not allowed to load local resource: file:///data/user/0/com.example.mobile/files/1527611495217.jpg。

2）我尝试使用DomSanitizer.bypassSecurityTrustResourceUrl()。同样的事情。

3）我尝试在Android上返回基本网址（file:///data/user/0/com.example.mobile/files/1527611495217.jpg）：同样的事情。

我的模板：

<ion-row>
  <ion-col col-6 *ngFor="let m of media">
    <img [src]="m | localImage">
  </ion-col>
</ion-row>

在我的index.html中，我有以下内容：

<meta http-equiv="Content-Security-Policy" img-src '*'>

离子3：本地图像不会在Android上显示

0 个答案: