angular2+ 图片 src 用base64编码时,会自动加上‘unsafe:’这个开头,解决方法

这个问题奇怪的是我一开始是将图片的base64编码数据存在本地数据库里,这个直接取出来在页面渲染正常,可是从后台再返给我时不知为什么在渲染时就自动在开头加上了“unsafe:”这个开头。

搜索了一下,有的解决方案说是要改config的设置,但是那好像是angularJS的解决方案,不是angular2+的, 

再继续找,找到这个:https://blog.csdn.net/weixin_30455067/article/details/96316033, 这个是写了一个管道,利用了 

DomSanitizer, 试了一下,还是不行,后来在  https://stackoverflow.com/questions/15606751/angularjs-changes-urls-to-unsafe-in-extension-page,最下面一个回答里看到一条,利用的还是DomSanitizer,只不过是没写在管道里,最后解决了。
 
在页面组件里引入:
import { DomSanitizer } from '@angular/platform-browser';

在constructor里:

  constructor(
    private sanitizer: DomSanitizer,
    ...
){...}

然后对图片数据变量处理:

img = this.sanitizer.bypassSecurityTrustResourceUrl( img );

之后html中的src渲染出来的就正常了。

        <img [src]="img" width="56" height="56" />

 

posted @ 2019-11-17 14:30  johnjackson  阅读(1694)  评论(0编辑  收藏  举报