Using SharePoint list images in Jquery getListItems

If you use JQuery's getListItems function to return an image from a SharePoint list, you will typically do something like this;


$().SPServices({
     operation: "GetListItems",
      async: false,
      listName: "leadsSelfContent",
      CAMLViewFields: "<ViewFields>
           <FieldRef Name='WebOptimizedImage' />
           ...
      </ViewFields>",
      CAMLQuery: "<Query>
                               ...
                             </Query>",
      completefunc: function (xData, Status) {
         $(xData.responseXML).SPFilterNode("z:row").each(function() {
           var ListItemImage = $(this).attr("ows_WebOptimizedImage");            ....


This is standard JQuery get list items format.  However, what happens when you want to use that value?  You cannot set an image field directly to this value as it will not work.

Since SharePoint actually returns two values for the image, one being the URL, one being the description, we only want the URL.  So we need to extract it from the result returned from JQuery by using the following:


ListItemImage = $(this).attr("ows_WebOptimized").split(",")[0];


This extracts the URL, which we can then apply to our html field:


$("#PageImage").attr({src : ListItemImage});

Effecting this field in HTML:

<img class="main-picure" src="" id="PageImage"></img>


This works.  However, if we don't have an image in the associated list from SharePoint, then the entire script fails.  Why?  Because this line will throw an error when the field being returned is undefined:


ListItemImage = $(this).attr("ows_WebOptimized").split(",")[0];

So, we first need to test to see if a result has been returned for this field before returning, and capture the undefined value, as follows:

        
           if(typeof(ListItemImage ) === 'undefined')
           {
              ListItemImage  = "Empty";
           }
           else
           {
              ListItemImage  = $(this).attr("ows_WebOptimized").split(",")[0];
           }


Finally we test for the result before setting the html field:

if(ListItemAllLeadersimageField != "Empty")
           {
                 $("#PageImage").attr({src :ListItemImage });
            }


This way, if the field is empty, our script will still run.


The code in its entirety looks like this:




$().SPServices({
     operation: "GetListItems",
      async: false,
      listName: "leadsSelfContent",
      CAMLViewFields: "<ViewFields>
           <FieldRef Name='WebOptimizedImage' />
           ...
      </ViewFields>",
      CAMLQuery: "<Query>
                               ...
                             </Query>",
      completefunc: function (xData, Status) {
         $(xData.responseXML).SPFilterNode("z:row").each(function() {
           var ListItemImage = $(this).attr("ows_WebOptimizedImage");
           if(typeof(ListItemImage ) === 'undefined')
             {
                ListItemImage  = "Empty";
             }
           else
             {
                ListItemImage  = $(this).attr("ows_WebOptimized").split(",")[0];
             }            if(ListItemAllLeadersimageField != "Empty")
             {
               $("#PageImage").attr({src :ListItemImage });
              }


This code will allow you to extract an image from a SharePoint list, test for an empty result, and then extract the URL from that result if not empty to set an html field.