Ionic3中嵌入图片，音频url地址，出现“WARNING: sanitizing unsafe URL value”错误的解决方法

在项目中有时候需要在叫页面上显示图片，音频的信息，在项目中我把图片和音频等文件都转成了base64格式上传到服务器数据库。

在Ionic2项目中比如使用：img，iframe，audio标签的src，a标签的href，需要使用数据库传来的base64数据时，变量直接赋值到url绑定数据的话，会报错，同样，需要引入外部url的资源链接也会报错。

网上找了很多资料：才发现是Ionic2和TypeScript中对外部url资源链接做了安全限制
官网文档中对此做了解释：
http://http://g.co/ng/security#xss

所以可以在项目中做以下修改：

1. ts文件中：

//1.在需要使用外部url链接的ts文件中，引入DomSanitizer类
import { DomSanitizer } from '@angular/platform-browser';  export class safeHtml{  safeUrl : any;  constructor(private sanitizer: DomSanitizer) {}  //2.在需要使用转换后的url地方加上getSafeUrl(url){this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); }

2. html页面中(这里以audio标签为例)

<audio controls="controls" [src]="safeUrl">audio>

然后就可以成功访问到所需的资源了

下一篇介绍 Angular TypeScript 中的 DomSanitizer

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！