web-dev-qa-db-ja.com

Ionic 2 + Angular 2： 'unsafe：'を前に付けた画像は、それらが正常であっても表示されない

何らかの理由で、私の画像の一部に'unsafe:'が付加されているため、レンダリングされません。

Q）なぜこれが発生し、どのように修正できますか-これはAngular 2がホワイトリストまたはIonic 2で奇妙ですか？

例えば.

<p><img src="unsafe:data:image/jpeg;base64,/9.....
<p><img src="data:image/jpeg;base64,/9.....

画像に問題はありません（こちらをご覧ください）、 plunkr here をご覧ください

2番目の画像はIonic 2からレンダリングされます。最初の画像は、接頭辞を手動で削除して、問題がないことを示しています。

imageangularionic2
24
Dave

この問題が発生した場合は、次を使用して「解決」しました。

クラス：

import {DomSanitizationService} from '@angular/platform-browser';

constructor(private _DomSanitizationService: DomSanitizationService) {}

テンプレート：

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>

imgSrcPropertyは、base64でエンコードされた問題のある画像です。

これはまだバグだと思います！

44
Dave

in angular 5.2.6

クラス：

import { DomSanitizer } from '@angular/platform-browser';
constructor(public _DomSanitizationService: DomSanitizer ) {}

テンプレート

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>
12
Milad Jafari

追加の回答を追加したいので、一部のユーザーは長年デバッグする必要はありません。

また、iOS上のIonic + Angular（WKWebView）とともにこの問題に遭遇し、Base64文字列に改行が含まれると、Base64データURLも「安全でない」と見なされることがわかりました。 MS WindowsスタイルのCRLFまたはLFのいずれか。

これらの問題のある文字をbase64文字列から削除し（外部インターフェイスは「きれいに印刷」していました）、最終的に問題を解決しました。

@Daveが言及したバイパスを適用する前に、文字列を確認します。

7
Wilk