Jquery rest called Image not dispalyed in sharepoint online page - sharepoint-online

Question

i am developing an share point hosted online application when i am fetch Picture Library list items successfully.But the Image is not displayed in the page. Here i attached my code whats wrong? Could any one guide to me. I am a new on Share point online App.
function LoadImages() {
appWebUrl = window.location.protocol + "//" + window.location.host + _spPageContextInfo.webServerRelativeUrl;
hostWebUrl = _spPageContextInfo.siteAbsoluteUrl;
$(function () {
var utilTargetsList = "CustomerLicenceGallary";
$.ajax({
url: appWebUrl + "/_api/SP.AppContextSite(#target)/web/lists/getbytitle('" + utilTargetsList + "')/items?#target='" + hostWebUrl + "'",
method: "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 (var i = 0; i < results.length; i++) {
jQuery('#Image').attr('src', results[i]["Name"]);
break;
}
},
//success: getitemssucces
error: function (error) {
console.log(JSON.stringify(error.toString()));
}
});
});
}
$(document).ready(function () {
LoadImages();
});
<div> <img id="Image" alt="Image" /></div>
PictureLibrary List

Answer 1

I got answer and working fine thanks all to support.
var arrayOfImageObjects = new Array();
var currentImageIndex = 0;
var hostWebUrl;
var appWebUrl;
function GetImagesAndRotate() {
appWebUrl = window.location.protocol + "//" + window.location.host
+ _spPageContextInfo.webServerRelativeUrl;
hostWebUrl = _spPageContextInfo.siteAbsoluteUrl;
// var url = appWebUrl + "/_api/SP.AppContextSite(#target)/web/lists/getbytitle('CustomerLicenceLibrary')/items?$expand=File"
//url: appWebUrl + "/_api/SP.AppContextSite(#target)/web/lists/getbytitle('" + utilTargetsList + "')/items?$top=1&#target='" + hostWebUrl + "'&$Orderby=ID desc",
jQuery.ajax({
url: appWebUrl + "/_api/SP.AppContextSite(#target)/web/lists/getbytitle('CustomerLicenceLibrary')/items?$expand=File&#target='" + hostWebUrl + "'",
type: "GET",
headers: {
"X-HTTP-Method": "MERGE",
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
},
success: function (data) {
var result = data.d.results;
for (var i = 0; i < result.length; i++) {
var image = result[i];
var imageObject = {};
imageObject.Name = image.File.Name;
imageObject.Url = image.File.ServerRelativeUrl;
imageObject.Width = image.File.ImageWidth;
imageObject.Height = image.File.ImageHeight;
arrayOfImageObjects.push(imageObject);
}
setTimeout(NextImage, 5000);
},
error: function () {
alert("request failed");
}
});
}
function NextImage() {
if (currentImageIndex < arrayOfImageObjects.length) {
jQuery('#Image').attr('src', arrayOfImageObjects[currentImageIndex].Url);
currentImageIndex++;
}
else
currentImageIndex = 0;
setTimeout(NextImage, 5000);
}
jQuery(document).ready(function () {
GetImagesAndRotate();
});