2017-03-31 8 views
11

रिस्पांस ऐसा दिखाई देता है:Angular2 Base64 sanitizing असुरक्षित URL मान को अपने सर्वर से

[{"coreGoalId":1,"title":"Core goal 1","infrastructure":"Sample Infrastructure","audience":"People","subGoals":null,"benefits":[{"benefitId":1,"what":"string","coreGoalId":1}],"effects":null,"steps":null,"images":[{"imagelId":1,"base64":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU\nFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgo\nKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAIWAe4DASIA\nAhEBAxEB/8QAHAABAAIDAQEB"}]}] 

मैं प्रदर्शित करने के लिए बेस 64 छवि उस में लौटे कोशिश कर रहा हूँ।

मेरी घटक में:

ngOnInit() { 

    this.homeService.getGoals() 
    .subscribe(
     goals => this.coreGoals = goals, 
     error => this.errorMessage = <any>error); 
} 

और फिर टेम्पलेट में:

<ul> 
    <li *ngFor="let goal of coreGoals"> 
     {{goal.title}} 
     <img [src]="'data:image/jpg;base64,'+goal.images[0].base64 | safeHtml" /> 
    </li> 
</ul> 

कहाँ safeHtml एक पाइप मैं निम्नलिखित की तरह बनाया है:

import { Pipe } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({name: 'safeHtml'}) 
export class SafeHtml { 
    constructor(private sanitizer:DomSanitizer){} 

    transform(html) { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
} 

यह मैं Required a safe URL, got a HTML त्रुटि देता है। क्या गलत हो रहा है? अगर मैं पाइप को <img /> से हटा देता हूं तो यह असुरक्षित यूआरएल कहता है।

उत्तर

17

आप की आवश्यकता होगी

bypassSecurityTrustResourceUrl(html); 
बजाय

bypassSecurityTrustHtml(html); 
+0

धन्यवाद! वह मेरी गलती थी। – Nitish