How to display a Google Drive image using Google A

Question

If I use the following, from Google's tutorial pages, to load an image, it works fine:

// The very first Google Doodle! app.add(app.createImage("http://www.google.com/logos/googleburn.jpg"));

but if I try to obtain a URL from own Google Docs, the image fails to load:

var image;
var url;    
var files = DocsList.getAllFiles();        
for (var i = 0; i < files.length; i++) {  
    url = files[i].getUrl();  
    app.add(app.createImage(image));  
    app.add(app.createLabel(url));  
}

The URL returned is not directly to the image but a Google Docs container of some sort:

http://docs.google.com/a/--------.com/open?id=0B5B_X4WaXYC7cExRT3Nvb0hTamc

Answer 1

Displaying an image in a UiApp from an authenticated URL is not possible, even from Google services like Sites, Docs, etc. Issue #912 documents this.

Answer 2

You can store the image as an attachment to a Google Sites page and then access it using the Sites API of Google Apps Script.

Answer 3

I know there's an accepted answer here but Since the deprecation of UiApp it's not really accurate anymore. The following is script to read a given Google drive directory and pass every publicly available image to the template via an assets object with the modern App Script APIs.

function getAssets(driveDir) {
    var folders = DriveApp.getFoldersByName(driveDir);
    var folder = (folders.hasNext())? folders.next() : false ;
    var assets = {};
    if(folder){
        var files = folder.getFiles();
        while (files.hasNext()) {
            var file = files.next();
            var fileName = file.getName();
            assets[fileName] = 'https://drive.google.com/uc?export=view&id=' + file.getId();
        }
    }
    return assets;
}

The doGet() function should include the assets

function doGet(e) {
    var form = HtmlService.createTemplateFromFile('form.html');
    form.assets = getAssets('Your-drive-folder-name');

    return form.evaluate();

}

And finally in the HTML template you will have access to your assets via the following code:

 <img src="<?= assets.fileName ?>" />

Again keep in mind that the assets have to be publicly available for image to be allowed on your google site/app script/whatever. You could set that via the getAssets() with the File.setSharing API method but I found that setting the permissions on upload was not much of a hassel.

Answer 4

yes, you can not use images stored in Google Docs. Imgae URL should be a hotlink(Direct link) to that image.

app.createImage('YOUR_IMAGE_HOT_LINK_URL');

Answer 5

Actually you can do this but I fear it is not very reliable. When you click the download button in the viewing container, that link will work. However, you have to have the image publicly available. Or share it to all users who will be able to view the Sheet or Doc.