angularjs增加了不安全的标签图像 [英] angularjs adds unsafe tag to image

问题描述

我检索从数据库中的图像，当我将其显示为一个base64文件，棱角增加了一个不安全的标签吧。我该如何解决这个问题？
这是我使用

 ＆LT; IMG NG-SRC =数据：图像;的base64，{{logo.base64}}/＆GT;
 

这是结果。

 ＆LT; IMG NG-SRC =数据：图像; BASE64，/ 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wCEAAkGBxQTEhMUExMWFB =SRC =不安全：数据：图像; BASE64，/ 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wCEAAkGBx =GT;
 

如果我删除不安全的标签浏览器，图像显示细腻。

感谢。

解决方案

从你的榜样，你并不需要更改白名单。顺便说一句，如果你要设置它，该 imgSrcSanitizationWhitelist 是一个函数，因此应设置如下：

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

有关您的问题，那是因为你的数据的URI不匹配正则表达式，一个 / 在数据：图片缺失。似乎图像类型，预计例如（数据：图像/ PNG; ）。

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

 ＆LT; IMG NG-SRC =数据：图像/ PNG; BASE64，{{logo.base64}}/＆GT;
 

希望这有助于。

I'm retrieving an image from a database and when I display it as a base64 file, angular adds an unsafe tag to it. How can I fix this? This is what I use

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

This is the result

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

If I remove the "unsafe" tag in the browser, the image displays fine.

Thanks.

解决方案

From your example, you don't need to change the white list. BTW if you have to set it, the imgSrcSanitizationWhitelist is a function so it should be set like this:

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

For your problem, it is because your data URI doesn't match the regexp, a / after data:image is missing. It seems the image type is expected e.g. (data:image/png;).

Try adding the correct image type if it works or not, note that the png is just an example.

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

Hope this helps.

这篇关于angularjs增加了不安全的标签图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！