<img>:资源 URL 上下文中使用的不安全值 [英] <img>: Unsafe value used in a resource URL context
问题描述
自从升级到最新的 Angular 2 候选版本后,我的 img
标签:
Since upgrading to the latest Angular 2 release candidate, my img
tags:
<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>
正在引发浏览器错误:
原始例外:错误:资源 URL 上下文中使用的值不安全
ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context
网址的值为:
http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg
我已经尝试了另一个解决方案中提出的建议,该问题应该是重复的,但我遇到了同样的错误.
I have tried the suggestion made in the other solution that this question is supposed to be a duplicate of but I am getting the same error.
我已将以下代码添加到控制器中:
I have added the following code to the controller:
import {DomSanitizationService} from '@angular/platform-browser';
@Component({
templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
static get parameters() {
return [[NavController], [App], [MenuController], [DomSanitizationService]];
}
constructor(nav, app, menu, sanitizer) {
this.app = app;
this.nav = nav;
this.menu = menu;
this.sanitizer = sanitizer;
this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
}
我仍然收到相同的错误消息.
I am still getting the same error message.
我也将 html 更改为:
I have also changed the html to:
<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>
我仍然收到相同的错误消息
I still get the same error message
推荐答案
我使用的是 rc.4,此方法适用于 ES2015(ES6):
I'm using rc.4 and this method works for ES2015(ES6):
import {DomSanitizationService} from '@angular/platform-browser';
@Component({
templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
static get parameters() {
return [NavController, App, MenuController, DomSanitizationService];
}
constructor(nav, app, menu, sanitizer) {
this.app = app;
this.nav = nav;
this.menu = menu;
this.sanitizer = sanitizer;
}
photoURL() {
return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
}
}
在 HTML 中:
<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
使用函数将确保该值在您对其进行消毒后不会更改.另请注意,您使用的清理功能取决于上下文.
Using a function will ensure that the value doesn't change after you sanitize it. Also be aware that the sanitization function you use depends on the context.
对于图像,bypassSecurityTrustUrl
可以使用,但对于其他用途,您需要参考文档:
For images, bypassSecurityTrustUrl
will work but for other uses you need to refer to the documentation:
https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
这篇关于<img>:资源 URL 上下文中使用的不安全值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!