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

Question

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);
});

}

Answer 1

You need to append $expand=Attachments in your query.

So, your final query would be like:

var query = "http://collaboration-dev.norgine.com/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=Attachments,LifeCycleStatus&$filter=Id eq " + window.DeviceId + "";

And after that, you can append it as below:

var imgDeviceImage = "<p><img src='/_layouts/15/blank.gif'/></p>";

if(item.Attachments){
    imgDeviceImage = "<p><img src='" + item.Attachments.results[0].__metadata.media_src + "'/></p>";
}