angularjs adds unsafe tag to image

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply