问题 angularjs为图像添加了不安全的标签


我正在从数据库中检索图像,当我将其显示为base64文件时,angular会为其添加一个不安全的标记。我怎样才能解决这个问题? 这就是我使用的

<img ng-src="data:image;base64,{{logo.base64}}" />

结果就是这样

<img  ng-src="data:image;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQTEhMUExMWFB=" src="unsafe:data:image;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBx=">

如果我删除浏览器中的“不安全”标签,图像显示正常。

谢谢。


10404
2017-08-22 13:47


起源

你用的是什么版本?几个月前推出了一个解决方案: github.com/angular/angular.js/issues/6581 - Sergiu Paraschiv
另外看看 $sce.trustAsResourceUrl。 - Sergiu Paraschiv
我添加了下面的代码,但仍然无效。我正在使用AngularJs 1.2.22 $ compileProvider.imgSrcSanitizationWhitelist = / ^ \ s *(https?| ftp | file | blob):| data:image \ //; - Shak Smith


答案:


在您的示例中,您无需更改白名单。顺便说一句,如果你必须设置它, imgSrcSanitizationWhitelist 是一个函数所以它应该像这样设置:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//);

对于您的问题,这是因为您的数据URI与正则表达式不匹配,a / 后 data:image 不见了。似乎图像类型是预期的,例如(data:image/png;)。

尝试添加正确的图像类型,如果它工作与否,请注意 png 只是一个例子。

<img ng-src="data:image/png;base64,{{logo.base64}}" />

希望这可以帮助。


15
2017-08-22 17:32