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" />
喜欢的话,请点赞,转发、收藏、评论,谢谢!