Angular4实现图片上传预览路径不安全的问题解决

前端之家收集整理的这篇文章主要介绍了Angular4实现图片上传预览路径不安全的问题解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传功能,在Angular4中,通过input:file上传选择图片本地预览的时候,通过window.URL.createObjectURL获取的url赋值给image的src出现错误

WARNING: sanitizing unsafe URL value

下面介绍一下解决方法

HTML代码

其中,change方法会在每次选择图片调用,image的src必须通过属性绑定的形式,使用插值表达式同样会出错

ts代码

首先,引入DomSanitizer,然后在构造器里面注入,最重要的就是把window.URL.createObjectURL生成的imgUrl通过santizer的bypassSecurityTrustUrl方法,将它转换成安全路径。

最后将生成的安全的url赋值给imgUrl,此时就没有问题了~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/js/34508.html

猜你在找的JavaScript相关文章