如何在其他域中显示图像/Chrome 打包应用程序答案

【问题标题】：How to show images in other domains / Chrome Packaged Apps如何在其他域中显示图像/Chrome 打包应用程序
【发布时间】：2013-10-18 06:20:30
【问题描述】：

我有一个 JSON，它返回图像的 URL 列表以访问已放置在此域白名单 manifest.json 中的字段中的 JSON，但是当我尝试查看图片时它抱怨它无法访问图片。

1-如何Perm可以显示包App内没有的图片

2 - 如何下载图片下载APP然后显示

对于第二个问题，我使用了 RAL，一个 lib 试用版 google，它可以正常工作，但是我无法使用这个发布库进行测试，他声称有错误，请点击图片库的链接并抱怨错误：

库：https://github.com/GoogleChrome/apps-resource-loader

错误：http://twitter.yfrog.com/oe24998653p

【问题讨论】：

查看您的源代码（此处未链接），您的问题是您在 manifest.json 中请求“实验”权限，因此 Chrome 网上应用店拒绝发布您的应用。但是，由于您关于下载图像的问题非常有趣，所以我将重新表述，以便其他人可以从答案中受益，好吗？

标签： google-chrome-app

【解决方案1】：

您可以使用 XMLHttpRequest 请求外部图像并将它们转换为 ObjectURL。然后将<img> 标记中的src 属性设置为每个ObjectURL，它应该可以工作。

由于这是一个非常常见的用例，我们创建了一个库来简化它。只需将 apps-resource-loader ral.min.js 放到您的项目中，然后：

var remoteImage, 
    container = document.querySelector('.imageContainer'),
    toLoad = { 'images': [ 
       'http://myserver.com/image1.png', 
       'http://myserver.com/image2.png' ] }; // list of image URLs

toLoad.images.forEach(function(imageToLoad) {
      remoteImage = new RAL.RemoteImage(imageToLoad);
      container.appendChild(remoteImage.element);
      RAL.Queue.add(remoteImage);
});
RAL.Queue.setMaxConnections(4);
RAL.Queue.start();

请记住，您需要在 manifest.json 中获得对您将要进行 XHR 访问的所有域的权限。如果您事先不知道这些图片将在哪里托管，您可以请求任何网址的许可：

    permissions: ['<all_urls>'],

其他用法和获取完整库，请参见项目页面： https://github.com/GoogleChrome/apps-resource-loader

还有一个简单的演示： https://github.com/GoogleChrome/apps-resource-loader/tree/master/demo

【讨论】：

【解决方案2】：

Google 已经添加了一个浏览器标签，允许您包含图像，但到目前为止我还无法让它工作。

这是他们作为示例展示的内容

<browser src="http://i.stack.imgur.com/dmHl0.png">

【讨论】：