Search code examples
javascriptjqueryangularjslightbox2

lightbox2 unsafe data image

I am trying to use lightbox2 with a data URL which is dymacilly set by Angularjs but for some reason it's not showing the image. In my console I get an error showing the data URL I set dynamically with ng-href but "unsafe" is prefixed to the url.

Anybody has a clue why this happens? I already added "data" to the white list of Angular and I also see that in the DOM the href is correct. 

config(['$compileProvider',
        function ($compileProvider) {
            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data):/);
        }]);

There is no "unsafe" prefixed only when I click on the link I get this error.

The error that I get in the console looks like this:

unsafe:data:image/png;base64,net:{the base 64 string}:ERR_UNKNOWN_URL_SCHEME

My link looks like this:

<a ng-href="data:image/png;base64,{{schedule.flyer}}" data-lightbox="image-1" data-title="My caption" >

If I add the base64 string directly in a normal href it works fine. Does anybody know how to get this to work?

Solution

  • I think that you should use the aHrefSanitizationWhitelist method per https://docs.angularjs.org/api/ng/provider/$compileProvider