在Chrome应用使用AngularJS，我可以直接使用ngSrc指令内部的图像？ [英] In a Chrome App using AngularJS, can I use the ngSrc directive directly for internal images?
问题描述
我使用AngularJS写Chrome应用。我知道，访问外部图像时，你必须做一个跨源XMLHtt prequest，并为他们提供服务的斑点。
我有一堆内部的图像（本地应用程序资源）遵循一个模式，我想在ngRepeat显示的。
我可以得到图像加载的东西，如静态就好了：
＆LT; IMG SRC =图像/ image1.png/＆GT;
但是当我尝试在这样的重复使用它们：
＆LT; DIV NG重复=项myList中＆GT;
＆LT; IMG NG-SRC ={{item.imageUrl}}/＆GT;
＆LT; / DIV＆GT;
我得到的每个图像的错误（虽然从错误的形象确实存在）是这样的：
拒绝加载图像'不安全：镀扩展：//hcdb...flhk/images/image1.png'，因为它违反了以下内容安全政策指令：IMG -src自我的数据：镀扩展资源。
我已经能够成功加载外部资源使用NG-src和XHR。我一定要遵循内部资源动态加载相同的模式？
更新 - 另一个简单的例子
用最简单的Chrome应用（ HTTPS开始：// github上.COM / GoogleChrome /镀铬的应用程序样本/树/主/你好世界），下面将Chrome应用（在浏览器以外的工作），但不属于Chrome应用程序中：
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-NG应用-CSP＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;的Hello World＆LT; /标题＆GT;
＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / test.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=CTRL＆GT;
＆LT; IMG NG-SRC ={{图片网址}}/＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
test.js
功能Ctrl键（$范围）{
$ scope.imageUrl ='hello_world.png';
}
我刚刚发现在另一个堆栈溢出问题的答案：
<一个href=\"http://stackoverflow.com/questions/15606751/angular-changes-urls-to-unsafe-in-extension-page\">Angular修改URL到＆QUOT;不安全：＆QUOT;在扩展页面
角具有白名单定期EX pression之前角将改变SRC的图片src网址必须匹配。 A镀铬扩展：// URL默认情况下不那么你必须改变它匹配。在这里看到更多的信息：
<一个href=\"http://docs.angularjs.org/api/ng/provider/\">http://docs.angularjs.org/api/ng/provider/$compileProvider
我添加了以下code，使铬扩展//网址白名单（使用其他计算器问题的答案code）：
angular.module（'对myApp'，[]）
的.config（[
'$ compileProvider'，
功能（$ compileProvider）{
变种currentImgSrcSanitizationWhitelist = $ compileProvider.imgSrcSanitizationWhitelist（）;
变种newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString（）。片（0，-1）
+'|铬扩展：'
+ currentImgSrcSanitizationWhitelist.toString（）片（-1）; 的console.log（+ currentImgSrcSanitizationWhitelist +到+ newImgSrcSanitizationWhiteList从改变imgSrcSanitizationWhiteList）;
$ compileProvider.imgSrcSanitizationWhitelist（newImgSrcSanitizationWhiteList）;
}
]）;
I'm writing a Chrome App using AngularJS. I know that when accessing external images you have to do a cross-origin XMLHttpRequest and serve them as blobs.
I have a bunch of internal images (local app resources) that follow a pattern that I want to display in an ngRepeat.
I can get the images to load statically just fine with something like:
<img src="images/image1.png"/>
But when I try using them in a repeat like this:
<div ng-repeat="item in myList">
<img ng-src="{{item.imageUrl}}"/>
</div>
I get an error for each image (though the image from the error does exist) like this:
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:".
I have been able to load external resources successfully using ng-src and XHR. Do I have to follow the same pattern for internal resources loaded dynamically?
Update - Another Simple Example
Starting with the simplest Chrome App (https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world), the following will work outside a chrome app (in the browser) but not within the chrome app:
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';
}
I just found the answer in another stack overflow question:
Angular changes urls to "unsafe:" in extension page
Angular has a whitelist regular expression that an image src url must match before angular will change the src. A chrome-extension:// url doesn't match it by default so you have to change it. See here for more information:
http://docs.angularjs.org/api/ng/provider/$compileProvider
I added the following code to allow chrome-extension// urls to the whitelist (using the code from the other stackoverflow question's answer):
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);
}
]);
这篇关于在Chrome应用使用AngularJS，我可以直接使用ngSrc指令内部的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
