google-chrome-app - 如何在其他域/Chrome 打包应用程序中显示图像

Question

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

1 - 如何Perm可以显示不在App包内的图片

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

对于第二个问题，我使用了 RAL，一个 lib 试用谷歌并且它有效，但是我无法使用这个发布的 lib 进行测试，他声称有错误，点击图像 lib 的链接并提示错误:

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

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

Answer 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 的域。如果您事先不知道这些图像将托管在哪里，您可以请求任何 url 的许可:

    permissions: ['<all_urls>'],

对于其他用法和获取完整的库，请查看项目页面: https://github.com/GoogleChrome/apps-resource-loader

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