Question

我正在尝试使用lightbox2，其数据网址由Angularjs设置，但出于某种原因，它没有显示图像。在我的控制台中，我收到一个错误，显示我使用ng-href动态设置的数据URL但是＆＃34;不安全＆＃34;在网址上加前缀。

任何人都知道为什么会这样？我已经添加了＃34;数据＆＃34;到Angular的白名单，我也看到在DOM中href是正确的。

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

没有＆＃34;不安全＆＃34;仅当我点击链接时出现前缀我才会收到此错误。

我在控制台中收到的错误如下所示：

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

我的链接如下：

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

如果我在正常的href中直接添加base64字符串，它可以正常工作。有人知道如何让它发挥作用吗？

Answer 1

我认为您应该按照https://docs.angularjs.org/api/ng/provider/$compileProvider

使用aHrefSanitizationWhitelist方法

Answer 2

问题是我配置了错误的白名单。我应该使用以下代码：

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

lightbox2不安全的数据图像

2 个答案: