angularjs adds unsafe tag to image

Question

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.

Answer 1

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.