How to display latest created image from a picture library in a page?

Question

There's a page where i need to show the latest created/uploaded image from a picture library. I did the following URL to retrieve that information to me (in JSOM):

_api/web/lists/getbytitle('cardapios')/items?filter=&$top=1&$orderby=Created desc&$select=EncodedAbsUrl

Question: Now i need to display this image in my page(subsite). What's the best way to do it? Is there a simple way to call it? The page is empty, its only purpose is to show that image.

---

Currently i'm reading some materials at MSDN:

http://msdn.microsoft.com/en-us/library/office/fp142380%28v=office.15%29.aspx#bk_how

http://msdn.microsoft.com/en-us/library/office/jj164022(v=office.15).aspx

I've already searched in many articles, but i'm still not understanding the concept. If you know any material that mighty be good for me to study, please leave a comment as well.

Answer 1

You can edit page and add following tag

<img id="latestImage" alt="Latest Image" />

Then add a script editor webpart and use following snippet

var siteUrl = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;

jQuery.ajax({
    url: siteUrl + "/_api/web/lists/getbytitle('test')/items?filter=&$top=1&$orderby=Created%20desc&$select=EncodedAbsUrl",
    type: "GET",    
    headers: { 
        "accept": "application/json;odata=verbose",
        "content-type":"application/json;odata=verbose",
        "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
    },
    success: function(d) {
        var stringData = JSON.stringify(d);
        var jsonObject = JSON.parse(stringData);
        var results = jsonObject.d.results;
        for(i = 0; i < results.length;i++) {
            jQuery('#latestImage').attr('src', results[i]["EncodedAbsUrl"]);
            break;
        }
    },
    error: function() {
        alert('failed');
    }
});