3

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

}

0

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>";
}
  • Cheers. That looks like it should work but no image is showing up – Dazza Jun 14 '17 at 9:13
  • Can you check the markup and see if its loaded in html ? also check the value in item.Attachments.results[0].__metadata.media_src ? Any errors in console ? – Gautam Sheth Jun 14 '17 at 9:18
  • The markup looks like it's loaded in HTML as the rest of the results have come back. I've put console.log(Attachments); into the JavaScript but nothing is coming up in Console? – Dazza Jun 14 '17 at 9:43
  • it should be item.Attachments in console – Gautam Sheth Jun 14 '17 at 9:44
  • Can you check edited code ? – Gautam Sheth Jun 14 '17 at 16:54

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.