javascript Android Hybid 应用程序使用 Ionic 框架显示远程图像的问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29912773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue with Android Hybid app to display remote image with Ionic framework?
提问by Jyoti Prakash
I am new to Ionic. I am using Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0
我是 Ionic 的新手。我正在使用 Ionic 框架 (1.3.20)、Angular JS、Cordova 5.0.0
Template filebrowse.html code:
模板文件browse.html 代码：
<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>
app.jscode:
app.js代码：
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html",
controller: 'Ctrl'
}
}
})
controller.jscode
控制器.js 代码
.controller('Ctrl',function($scope) {
$scope.currentImage = 0;
$scope.availableImages = [
{
src: "http://lorempixel.com/160/160/people/3"
}
];
console.log("reading image in controller !!!");
})
Header details:
标题详细信息：
Request URL:http://lorempixel.com/160/160/people/3
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36
Config.xmlfile:
config.xml文件：
<access origin="*"/>
Erroron console:
控制台错误：
GET http://lorempixel.com/160/160/people/3 404 (Not Found)
I verified the url http://lorempixel.com/160/160/people/3is showing image in my mobile browser. but the image is not coming on the app.
我验证了 url http://lorempixel.com/160/160/people/3在我的移动浏览器中显示图像。但图像没有出现在应用程序上。
回答by Keval
Whitelisting the domains using cordova-plugin-whitelistsolves the issue.
使用cordova-plugin-whitelist将域列入白名单可以解决这个问题。
Add the plugin via CLI:
通过 CLI 添加插件：
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml:
然后将以下代码行添加到您的应用程序的config.xml：
<allow-navigation href="http://*/*" />
and
和
this metatag in your index.html
meta你的这个标签index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
EDIT:The reason for this issue:
编辑：这个问题的原因：
From Cordova 4.0.0 for Android's update:
从 Cordova 4.0.0 for Android 的更新：
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).
Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.
修改了白名单功能
您需要添加新的 cordova-plugin-whitelist 插件才能继续使用白名单
现在支持设置内容安全策略 (CSP)，并且是推荐的白名单方式（请参阅插件自述文件中的详细信息）
默认情况下，没有插件会阻止网络请求，因此即使您使用 CSP，也请安装此插件以允许所有请求。
这个新的白名单得到了增强，更加安全和可配置，但仍然可以通过单独的插件（不推荐）使用旧版白名单行为。
注意：虽然严格来说不是这个版本的一部分，但由cordova-cli 创建的最新默认应用程序将默认包含这个插件。
回答by Z3R0
Build this plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview
构建这个 plnkr：http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview
My html file:
我的 html 文件：
<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>
Javascript:
Javascript：
$scope.currentImage = 0;
$scope.availableImages = [{
src: "http://lorempixel.com/160/160/people/3"
}];
It seems that everything is alright...
Tested with angularjs 1.3.15
似乎一切都好......
用angularjs 1.3.15测试
