How to show images in other domains / Chrome Packaged Apps

Question

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 - How to Perm can display images that are not within the package App

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

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

Error: http://twitter.yfrog.com/oe24998653p

Answer 1

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.

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();

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>'],

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

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

Answer 2

Google has added a browser tag that allows you to include images, but so far I haven't been able to get it to work.

Here is what they show as an example

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