Displaying an image from a SharePoint list using Javascript

Question

Users can submit an attachment of an image via an InfoPath form to a SharePoint list. I have various results showing on a HTML page. The SharePoint list is queried via Javascript code (below). What would I need to add to dispay the image attachment on the HTML page? The URL of a test image I uploaded is: http://collaboration-dev.xxx/sites/it/SystemInventory/Lists/Devices/Attachments/9/LAPTOP.jpg

function getDeviceDetails() {
var txtTitle = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtLifeCycles = "";
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=new Date();
        LifeCycleStart.toString('dddd,MMM,yyyy');



        var LifeCycleStatus = item.LifeCycleStatusValue;
        var DeviceOverView = item.Description;
        var AccessDetails = item.Accessories;
        var DeviceKind = item.Devicetype;
        var Usage = item.TypicalUsage;
        //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>";
       // txtKnownSystemIssues = "<p>" + KnownSystem + "</p>"
    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
    $('#devicekind').append(txtDevicetype);
    $('#deviceacc').append(txtAccessories);
    $('#deviceuse').append(txtTypicalDeviceUsage);
   // $('#knownsystemissues').append(txtKnownSystemIssues);

});





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

Answer 1

Once the image is saved..can you get the attachment url? I guess u can. Once you have the URL append the URL in a div in the page. below example is attaching a image inside a table in sharepoint form by creating a div in run time

var imageurl = siteurl + "attachment/" + listItem.get_item("FileLeafRef");
    $("table[id='tableID']").after("<div id='preview'></div>")                  
                    $('#preview').append("<img src='" + imageurl + "'/>");
                    $('#preview').css("position", "relative");