Question

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

1 - 如何烫发可以显示不在包App

中的图像

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

到第二个问题我使用了RAL，一个lib试用谷歌并且它有效，但是我无法使用这个出版物库进行测试他声称有错误，请点击图片库的链接并抱怨错误：< / p>

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的所有域的权限。如果您事先不知道这些图像的托管位置，您可以请求任何网址的许可：

    permissions: ['<all_urls>'],

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

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

Answer 2

Google添加了一个允许您添加图片的浏览器标记，但到目前为止，我还无法让它工作。

以下是他们作为示例展示的内容

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

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

2 个答案: