Add image to lightswitch using local property and file location

Question

just a quick question, is it possible to display a static image within a screen on lightswitch?

I want to click "Add Data Item" -> select "Local Property" and Type "Image". Now unlike previous versions i cannot select a file path so i need to write some js via the post-Render section, what do i type in here?

Thanks for any help you an give me, tried a few methods with no success.

Answer 1

Having recently tackled a similar situation we've implemented the following helper promise operation function: -

function GetImageProperty (operation) {
    var image = new Image();
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  
    // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) 
    // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var url = URL.createObjectURL(this.response);
        image.onload = function () {
            URL.revokeObjectURL(url);
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
        };
        image.src = url;
    };
    xhr.open('GET', this.imageSource, true);
    xhr.responseType = 'blob';
    xhr.send();
};

Having added a local property (Add Data Item -> Local Property -> Type: Image -> Name: ImageProperty) and placed it into the content item tree the promise operation can be executed in the following way within the _postRender routines: -

msls.promiseOperation
(
    $.proxy(
        GetImageProperty,
        { imageSource: "content/images/user-splash-screen.png" }
    )
).then(
    function (result) { 
        contentItem.screen.ImageProperty = result; 
    }
);

Alternatively, it can be called as follows in the screen's created function: -

msls.promiseOperation
(
    $.proxy(
        GetImageProperty,
        { imageSource: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png" }
    )
).then(
    function (result) { 
        screen.ImageProperty = result; 
    }
);

The above call also demonstrates that, in addition to displaying images local to the LightSwitch project, the imageSource can be set to an external url (provided the external site uses the appropriate server-side ACAO headers to allow cross-domain access).

EDIT: I've updated this helper function to improve it slightly in answer to this post Adding static image to Lightswitch HTML 2013 Browse Screen.