Skip to main content
1 of 2
Dazza
  • 767
  • 1
  • 11
  • 28

Displaying an image from a SharePoint list using Javascript on a HTML page

I have a JavaScript page which queries a SharePoint list. I used an InfoPath form to add a jpg to an item. Now I want to display the image on a HTML page with the rest of the results. The jpg url is http://collaboration-xxx.com/sites/it/SystemInventory/Lists/Devices/Attachments/9/LAPTOP.jpg

How would I query, return and display the image using JavaScript? I've added var imgDeviceImage already. Would I need to change the current var query? The code I've got so far is below:

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

 
var query = "http://collaboration-dev.norgine.com/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=LifeCycleStatus&$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 date = item.DeviceAvailableFrom;
       
         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 Picture = item.DeviceImage;
        //var KnownSystem = item.KnownSystemIssues
        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
        txtAccessories = "<p>" + AccessDetails + "</p>";  
        txtDevicetype = "<p>" + DeviceKind  + "</p>";
        txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
        imgDeviceImage = "<p>" + Attachments + "</p>"
       // txtKnownSystemIssues = "<p>" + KnownSystem + "</p>"
    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
    $('#devicekind').append(txtDevicetype);
    $('#deviceacc').append(txtAccessories);
    $('#deviceuse').append(txtTypicalDeviceUsage);
    $('#deviceimage').append(imgDeviceImage);
   // $('#knownsystemissues').append(txtKnownSystemIssues);
      
});

    



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

}

Dazza
  • 767
  • 1
  • 11
  • 28