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

Question

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

1 - 如何烫发可以显示不在包App中的图像

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

对于第二个问题,我使用了RAL,一个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.jsonXHR所有域名的许可.如果您事先不知道这些图像的托管位置,您可以请求任何网址的许可:

    permissions: ['<all_urls>'],

有关其他用法和获取完整库,请参阅项目页面:https: //github.com/GoogleChrome/apps-resource-loader

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