何らかの理由で、私の画像の一部に'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からレンダリングされます。最初の画像は、接頭辞を手動で削除して、問題がないことを示しています。
この問題が発生した場合は、次を使用して「解決」しました。
クラス:
import {DomSanitizationService} from '@angular/platform-browser';
constructor(private _DomSanitizationService: DomSanitizationService) {}
テンプレート:
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>
imgSrcProperty
は、base64でエンコードされた問題のある画像です。
これはまだバグだと思います!
in angular 5.2.6
クラス:
import { DomSanitizer } from '@angular/platform-browser';
constructor(public _DomSanitizationService: DomSanitizer ) {}
テンプレート
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/>
追加の回答を追加したいので、一部のユーザーは長年デバッグする必要はありません。
また、iOS上のIonic + Angular(WKWebView)とともにこの問題に遭遇し、Base64文字列に改行が含まれると、Base64データURLも「安全でない」と見なされることがわかりました。 MS WindowsスタイルのCRLFまたはLFのいずれか。
これらの問題のある文字をbase64文字列から削除し(外部インターフェイスは「きれいに印刷」していました)、最終的に問題を解決しました。
@Daveが言及したバイパスを適用する前に、文字列を確認します。