Я использую канал в своем приложении Ionic 3 для изменения URL-адресов локально захваченных изображений, чтобы они могли отображаться в теге <img>
.Это прекрасно работает в iOS.
Однако на Android я настраиваюсь на следующую ошибку в моем удаленном веб-инспекторе: Not allowed to load local resource: file:///data/user/0/com.example.mobile/files/1527609310822.jpg
.Эта проблема возникает даже после запуска моего URL-адреса через DomSanitizer (см. Код ниже).
Что я пробовал:
Я настроил канал для правильного изменения локального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;
}
}
URL-адреса iOS, входящие в канал:
file:///var/mobile/Containers/Data/Application/325C2BBA-FCA9-4838-974F-9F84BDF2F6F5/Library/NoCloud/1527606661016.jpg
URL-адреса iOS, выходящие из канала (работает):
http://localhost:8080/var/mobile/Containers/Data/Application/325C2BBA-FCA9-4838-974F-9F84BDF2F6F5/Library/NoCloud/1527606661016.jpg
URL-адреса Android, поступающие в канал (известно, что файлы существуют):
file:///data/user/0/com.example.mobile/files/1527606953669.jpg
URL-адреса Android выходяттрубы:
{"changingThisBreaksApplicationSecurity":"file:///data/user/0/com.example.mobile/files/1527606953669.jpg"}
Что происходит:
1) Я пытаюсь использовать DomSanitizer.bypassSecurityTrustUrl()
на Android.Я получаю сообщение об ошибке: Not allowed to load local resource: file:///data/user/0/com.example.mobile/files/1527611495217.jpg
.
2) Я пытаюсь использовать DomSanitizer.bypassSecurityTrustResourceUrl()
.То же самое.
3) Я пытаюсь просто вернуть базовый URL на 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>
В моем индексе.html, у меня на всякий случай следующее:
<meta http-equiv="Content-Security-Policy" img-src '*'>