Angular 2 앱의 구성 요소 템플릿에서 DIV의 배경 이미지를 설정하고 싶습니다. 그러나 콘솔에 다음 경고가 계속 표시되고 원하는 효과를 얻지 못합니다 … Angular2의 보안 제한으로 인해 동적 CSS 배경 이미지가 차단되는지 또는 HTML 템플릿이 손상되었는지 확실하지 않습니다.
이것은 내 콘솔에 표시되는 경고입니다 (img URL을 /img/path/is/correct.png
다음과 같이 변경했습니다 .
경고 : 안전하지 않은 스타일 값 url 삭제 (SafeValue는 [property] = binding : /img/path/is/correct.png를 사용해야합니다 ( http://g.co/ng/security#xss 참조 )) ( http : // 참조 ) . g.co/ng/security#xss ).
문제는 DomSanitizationService
Angular2를 사용하여 템플릿에 주입 된 내용을 삭제하는 것입니다 . 내 템플릿에있는 HTML은 다음과 같습니다.
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>
다음은 구성 요소입니다 …
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private sanitization:DomSanitizationService) {
}
ngOnChanges():void {
map(this.element, this);
function map(element:Card, instance:CardComponent):void {
if (element) {
instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);
instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
return instance.sanitization.bypassSecurityTrustHtml(input);
});
if (element.image) {
/* Here is the problem... I have also used bypassSecurityTrustUrl */
instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
} else {
instance.image = null;
}
}
}
}
}
예를 들어 [src] = “image”를 사용하여 템플릿에 바인딩 한 경우 다음과 같이하십시오.
<div *ngIf="image">
<img [src]="image">
</div>
및 image
사용하여 전달 된 bypassSecurityTrustUrl
모든 것이 잘 작동하는 것 같았다 … 깡통 사람이 내가 잘못을하고있는 중이 야 무엇을보고?
답변
전체 url
문을 다음과 bypassSecurityTrustStyle
같이 래핑해야 합니다 .
<div class="header" *ngIf="image" [style.background-image]="image"></div>
그리고
this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);
그렇지 않으면 유효한 스타일 속성으로 표시되지 않습니다.
답변
이것을 사용하십시오 <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>
문제가 해결되었습니다.
답변
선형 그라데이션이있는 배경 이미지 ( *ngFor
)
전망:
<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content">
</div>
수업:
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
constructor(private _sanitizer: DomSanitizer) {}
getBackground(image) {
return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`);
}
답변
확인 이 Angular2 편리 파이프 : 사용법 :
-
에
SafePipe
코드 교체DomSanitizationService
와 함께DomSanitizer
-
SafePipe
당신 의 경우를 제공 하십시오NgModule
-
<div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>
답변
https://angular.io/api/platform-browser/DomSanitizer 의 문서에 따르면 이 작업을 수행하는 올바른 방법은 sanitize를 사용하는 것 같습니다. 적어도 Angular 7에서는 (이전과 변경되었는지 모르겠습니다). 이것은 나를 위해 일했습니다.
import { Component, OnInit, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
constructor(
private sanitizer: DomSanitizer
) { }
this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');
Re SecurityContext, https://angular.io/api/core/SecurityContext 참조 . 기본적으로 다음 열거 형입니다.
enum SecurityContext {
NONE: 0
HTML: 1
STYLE: 2
SCRIPT: 3
URL: 4
RESOURCE_URL: 5
}
답변
Angular 7의 이미지 태그에 동적 URL을 추가하는 동안 동일한 문제가 발생했습니다. 많이 검색하여이 솔루션을 찾았습니다.
먼저 컴포넌트 파일에 아래 코드를 작성하십시오.
constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
return this.sanitizer.bypassSecurityTrustUrl(url);
}
이제 html 이미지 태그에 다음과 같이 작성할 수 있습니다.
<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />
item.imageUrl 대신 요구 사항에 따라 작성할 수 있습니다.
이 사이트에서 참조를 얻었습니다. 동적 URL . 이 솔루션이 도움이되기를 바랍니다. 🙂
답변
실제로 삭제 된 것이있는 경우에만이 경고를 인쇄하는 공개 된 문제가 있습니다.
https://github.com/angular/angular/pull/10272
아무것도 삭제되지 않았을 때이 경고가 인쇄 될 때 자세히 읽지 않았습니다.