gpt4 book ai didi

angularjs - 在使用 AngularJS 的 Chrome 应用程序中,我可以直接将 ngSrc 指令用于内部图像吗?

转载 作者:行者123 更新时间:2023-12-04 13:02:18 24 4
gpt4 key购买 nike

我正在使用 AngularJS 编写 Chrome 应用程序。我知道在访问外部图像时,您必须执行跨源 XMLHttpRequest 并将它们作为 blob 提供。

我有一堆内部图像(本地应用程序资源),它们遵循我想在 ngRepeat 中显示的模式。

我可以使用以下内容静态加载图像:

<img src="images/image1.png"/>

但是当我尝试像这样重复使用它们时:
<div ng-repeat="item in myList">
<img ng-src="{{item.imageUrl}}"/>
</div>

我收到每个图像的错误(尽管错误中的图像确实存在),如下所示:
Refused to load the image 'unsafe:chrome-extension://hcdb...flhk/images/image1.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

我已经能够使用 ng-src 和 XHR 成功加载外部资源。对于动态加载的内部资源,我是否必须遵循相同的模式?

更新 - 另一个简单的例子

从最简单的 Chrome 应用程序 ( https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world ) 开始,以下内容将在 chrome 应用程序之外(在浏览器中)运行,但不能在 chrome 应用程序内运行:

index.html
<!DOCTYPE html>
<html ng-app ng-csp>
<head>
<title>Hello World</title>
<script src="js/angular.min.js"></script>
<script src="js/test.js"></script>
</head>
<body ng-controller="Ctrl">
<img ng-src="{{imageUrl}}"/>
</body>
</html>

test.js
function Ctrl($scope) {
$scope.imageUrl = 'hello_world.png';
}

最佳答案

我刚刚在另一个堆栈溢出问题中找到了答案:

Angular changes urls to "unsafe:" in extension page

Angular 有一个白名单正则表达式,在 angular 更改 src 之前,图像 src url 必须匹配。默认情况下 chrome-extension://url 不匹配,因此您必须更改它。浏览此处获取更多信息:

http://docs.angularjs.org/api/ng/provider/ $compileProvider

我添加了以下代码以允许 chrome-extension//urls 到白名单(使用其他 stackoverflow 问题答案中的代码):

angular.module('myApp', [])
.config( [
'$compileProvider',
function( $compileProvider ) {
var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0,-1)
+ '|chrome-extension:'
+currentImgSrcSanitizationWhitelist.toString().slice(-1);

console.log("Changing imgSrcSanitizationWhiteList from "+currentImgSrcSanitizationWhitelist+" to "+newImgSrcSanitizationWhiteList);
$compileProvider.imgSrcSanitizationWhitelist(newImgSrcSanitizationWhiteList);
}
]);

关于angularjs - 在使用 AngularJS 的 Chrome 应用程序中,我可以直接将 ngSrc 指令用于内部图像吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22754393/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com