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

问题描述

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

I have a JSON which returns a list of URLs of images to access the JSON that is already placed in a field in this domain whitelist manifest.json, however when I try to view the pictures it complains that it can not access the images.

1-如何进行烫印可以显示不在应用程序包中的图像

1 - How to Perm can display images that are not within the package App

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

2 - How can I download the images to download the APP and then display

对于第二个问题，我使用了RAL(一个库试用版google)进行了测试，并且可以正常运行，但是我无法使用该出版物库进行测试，他声称有错误，请点击指向图片库的链接并抱怨该错误:

to this second question I used the RAL, a lib trial google and it worked, however I could not make a test using this publication lib he claims an error, follow the link to the image lib and complaining about the error:

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

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

推荐答案

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

You can request external images using XMLHttpRequest and transform them into ObjectURLs. Then set the src attribute in the <img> tag to each ObjectURL and it should work.

由于这是一个非常常见的用例，因此我们创建了一个库来简化它.只需删除apps-resource-loader ral.min.js 转到您的项目，然后:

Since this is a very common use case, we created a library to simplify it. Just drop the apps-resource-loader ral.min.js to your project and then:

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的许可:

Remember that you need permission in the manifest.json to all domains you will be XHR'ing to. If you don't know beforehand where those images will be hosted, you can ask permission for any url:

    permissions: ['<all_urls>'],

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

For other usages and to get the full library, please see the project page:https://github.com/GoogleChrome/apps-resource-loader

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

and a simple demo at:https://github.com/GoogleChrome/apps-resource-loader/tree/master/demo

这篇关于如何在其他域/Chrome打包的应用中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！