I have a JavaScript page querying a SharePoint list. It's displaying the results on a HTML page. Now I need to display an image for each item. I've uploaded an image to a Library called Device Images and the copied the URL into a column called DeviceImage in the queried SharePoint list. So now I'm trying to get the image to display by building a string, but I'm pretty new to this so don't know the syntax.

The relevant lines are:

var imgDevicePicture = "";

var DeviceImage = item.Picture;

imgDevicePicture = "<p"> + DeviceImage + "</p>";

and where I think I need help:


Full Javascript and HTML below

function getDeviceDetails() {
var txtTitle = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtLifeCycles = "";
var txtTrafficlight = "";
var imgDevicePicture = "";
var tempLCS2 = "";

var query = "http://xxx/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=LifeCycleStatus&Priority&$filter=Id eq " + window.DeviceId + "";

var call = $.ajax({
        url: query,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function(index, item) {
        var tempID = item.Id;
        var tempTitle = item.Title;
         var LifeCycleStart = item.DeviceAvailableFrom;
        var LifeCycleStatus = item.LifeCycleStatusValue;
        var DeviceOverView = item.Description;
        var AccessDetails = item.Accessories;
        var DeviceKind = item.Devicetype;
        var Usage = item.TypicalUsage;
        var DevicePriority = item.PriorityValue;
        var DeviceImage = item.Picture;

        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
        txtAccessories = "<p>" + AccessDetails + "</p>";  
        txtDevicetype = "<p>" + DeviceKind  + "</p>";
        txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
        txtTrafficlight = "<p>" + DevicePriority + "</p>";
        imgDevicePicture = "<p"> + DeviceImage + "</p>";

    $('#imageContainer').append("<img src='/sites/IT/SiteAssets/"+txtTrafficlight.replace(/<[^>]*>/g, '')+".png' />");


call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Error retrieving data: " + jqXHR.responseText);


   <html xmlns:mso="urn:schemas-microsoft-com:office:office"   

    <script src="/jquery-1.10.1.min.js"></script>

    <script src="/it/SystemInventory/SiteAssets/scripts/moment.min.js"></script>
    <script src="/sites/it/SystemInventory/SiteAssets/getDevices.js"></script>


     <script type="text/javascript">

     function parseQueryString(queryString)
    var params = {}, queries, temp, i, l;
    queries = queryString.split("&");
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    return params;

    function getDeviceID() {
        if(typeof parseQueryString === "function") {
            if(window.location.href.indexOf("?") >= 0) {
                var qs = parseQueryString(window.location.href.split("?")[1])
                window.DeviceId = qs.did;



      <!--[if gte mso 9]><xml>
      <mso:_dlc_DocId msdt:dt="string">ITDOCUMENTS-135-47</mso:_dlc_DocId>
      <mso:_dlc_DocIdItemGuid msdt:dt="string">1d6007ea-9e58-4298-b2d6-  

      <mso:_dlc_DocIdUrl msdt:dt="string">http://collaboration-  

       ID=ITDOCUMENTS-135-47, ITDOCUMENTS-135-47</mso:_dlc_DocIdUrl>

       <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;}

        .tg td{font-family:Arial, sans-serif;font-size:16px;padding:10px   

       .tg .tg-yw4l{vertical-align:top}

    <table class="tg">

    <td rowspan="3" class="tg-yw4l"><h2>Devices</h2>
     <div id="devices"></div>


    <td class="tg-yw4l"><h2>Devise Details</h2> 
    <div id="deviceimage">
    <div id="devicedetails">


       <td class="tg-yw4l"><h2>Specification</h2>

     <div id="deviceoverview">
         <div id="devicekind">  
             <div id="deviceimage">

                 <td class="tg-yw4l"><h2>Known Issues</h2> 
           <div id="knowntitle">
          <input type=button     

      onClick="location.href=XXXX/it/SystemInventory/Lists/Knownissues/NewForm.aspx?Source=http%3A%2F%2Fcollaboration%2Ddev%2Enorgine%2Ecom%2Fsites%2Fit%2FSystemInventory%2FLists%2FKnownissues%2FAllItems%2Easpx&RootFolder='" value='Submit a known issue '> 


       <td class="tg-yw4l"><h2>Accessories </h2> 
     <div id="deviceacc"></div></td>

    <td colspan="2" td class="tg-yw4l"><h2>Typical Usage</h2> 
 <div id="deviceuse"><//img id="light" class="red" src="red.gif">
    <td colspan="3" td class="tg-yw4l" width="100"><h2>Current Status</h2> 
    <div id="devicestatus"> 
      <div id="imageContainer">


ID's should be unique,, use class if you want to use the same properties on multiple elements.

In HTML Change <div id="deviceimage"> to <div class="deviceimage">

In JS Change imgDevicePicture = "<p"> + DeviceImage + "</p>"; to

imgDevicePicture = "<img src='" + DeviceImage + "'>";

And change $('#deviceimage').append(imgDeviceImage); to $('.deviceimage').append(imgDevicePicture);


If a column is called DeviceImage try item.DeviceImage instead item.Picture


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.