Ionic 2 + Angular 2 : 'unsafe :'가 붙은 이미지가 표시되기 때문에 괜찮습니다.

Question

어떤 이유로 내 이미지에 'unsafe:'이 붙어있어 이미지가 렌더링되지 않습니다.

Q) 왜 이런 일이 일어나고 어떻게 해결할 수 있습니까?이 각도 2는 허용 목록 또는 이온 2와 이상하지 않습니까?

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

(여기 참조), 두 번째 이미지는 이온 2에서 렌더링 plunkr here

는 먼저 내가 수동으로 괜찮아요 보여 접두사를 제거 참조 이미지와 아무 문제가 없습니다.

이

클래스 :이

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

constructor(private _DomSanitizationService: DomSanitizationService) {} 

템플릿 :

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

이 imgSrcProperty가 어디

Answer 1

이 문제가 발생하는 누군가를 위해, 나는이 다음 사용하여 '해결'한 오류가있는 이미지 base64가 인코딩되었습니다.

나는 아직도 버그라고 생각합니다!

Answer 2

추가 답변을 추가하고 싶습니다. 따라서 일부 사용자는 디버그하지 않아도됩니다.

또한 iOS (WKWebView)에서 Ionic + Angular와 함께이 문제를 발견했으며 Base64 문자열에 줄 바꿈이 포함되면 Base64 데이터 URL도 "안전하지 않은"것으로 간주됩니다. MS Windows 스타일 CRLF 또는 LF.

우리는 base64 문자열 (외부 인터페이스가 "pretty printing"이었습니다)에서 그 문제가되는 문자를 제거하여 궁극적으로 문제를 해결했습니다.

@Dave에서 언급 한 바이 패스를 적용하기 전에 문자열을 확인합니다.