angularjs向图像添加不安全标签

Question

我正在从数据库中检索图像，当我将其显示为 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=">

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

谢谢。

Answer 1

从您的示例来看，您不需要更改白名单。顺便说一句，如果您必须设置它，imgSrcSanitizationWhitelist 是一个函数，因此应该像这样设置:

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

对于您的问题，这是因为您的数据 URI 与正则表达式不匹配，data:image 后面缺少 / 。看来图像类型是预期的，例如(数据:image/png;)。

尝试添加正确的图像类型(无论是否有效)，请注意 png 只是一个示例。

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

希望这有帮助。