Wednesday, April 15, 2015

How to get image URL using JSOM in SharePoint 2013

Use below code to get the image URL from the Image field which has type as Hyperlink or Picture in SharePoint custom list.

var user;
var clientContext;
var lstItem;
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', loadImage);

function loadImage() {
DisplayImage() ;
}
function DisplayImage () {

     clientContext = new SP.ClientContext();
     var groupCollection = clientContext.get_web().get_siteGroups();
     user = clientContext.get_web().get_currentUser();
     clientContext.load(user);
     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {
var lst = clientContext.get_web().get_lists().getByTitle(“ListName”);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View> <Query> <Where><Eq><FieldRef Name=\ID\' /><Value Type=\'Text\'>1</Value></Eq></Where> </Query> <ViewFields><FieldRef Name=\'Image\' /><FieldRef Name=\'ID\' /></ViewFields> </View>');
    lstItem= lst.getItems(camlQuery);
    clientContext.load(lstItem);
    clientContext.executeQueryAsync(onSuccess, onQueryFailed);
}
function onSuccess()
{
            var ListEnum = lstItem.getEnumerator();
           
            while(ListEnum.moveNext()){
                        var objListItem=ListEnum.get_current();
                        document.getElementById("ImageID").src= objListItem.get_item("Image").get_url();
                        }
}
function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


Enjoy SharePoint!!!

No comments:

Post a Comment