如何解决警告:清理不安全的 URL 值数据:text/html;base64,
我以图像的形式从服务器收到响应,我将其作为 blob 接受并将其转换为图像
模板:
<img [src]="imgSrc" alt="Loading....">
ts 文件:
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load",() => {
this.imgSrc=reader.result;
},false);
if (image) {
reader.readAsDataURL(image);
}
}
this.createImageFromBlob(data) //data is the response from the server
它给了我警告:清理不安全的 URL 值数据:text/html;base64。
使用 DomSanitizer bypassSecurityTrust 给出参数 String 的错误 | ArrayBuffer 不可分配给字符串类型
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load",() => {
this.imgSrc=this.sanitizer.bypassSecurityTrustResourceUrl(reader.result); //error here
},false);
if (image) {
reader.readAsDataURL(image);
}
}
如何在 blob 到 Image 的情况下绕过 Angular 安全
解决办法: 问题出在 reader.result 中,它没有提供有效的图像,因此我必须在后端将图像作为数组缓冲区获取,然后将其发送到前端以获得正确的图像.
实际上,我的后端首先从另一个站点获取图像,然后将其发送到前端。
解决方法
如果您的图片是 base64 格式,您可以直接绑定到图片的 src。
<img [src]="your-base64-image-filed"/>
在您的代码中可能遗漏了像 mime 类型这样的东西。您确定 reader.result 是有效图片吗?
,尝试使用以下 sanitizer 转换为 HTML。
<img [src]="!='' ? _sanitizer.bypassSecurityTrustResourceUrl(croppedImage) : '/assets/images/default-profile.jpg'" alt="Image Preview"/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。