After successfully fetching data from the API controller using an AJAX request, all the data is loaded correctly, including the image source. However, I have encountered an issue where the controller name is being appended to the image source, resulting in a broken link. Below is the code snippet for the AJAX request:
$.ajax({
type: 'GET',
url: '/api/PieData',
dataType: 'json',
success: function (jsonData) {
if (jsonData == null) {
alert('no data returned');
return;
}
$.each(jsonData, function (index, pie) {
var pieSummaryString = '<div class="col-lg-4 col-sm-6 mb-4"> ' +
' <div class="card h-100" style="width: 17rem;">' +
' <img class="card-img-top" src=' + pie.imageThumbnailUrl + ' alt="Image Not Found">' +
' <div class="card-body">' +
' <h3 class="card-title">' + pie.price + '</h3>' +
' <h3>' +
' <a href=/Pie/Details/' + pie.pieId + '>' + pie.name + '</a>' +
' </h3>' +
' <p class="card-text">' + pie.shortDescription + '</p>' +
' </div>' +
' <div class="addToCart">' +
' <p class="button">' +
' <a class="btn btn-primary" href=/ShoppingCart/AddToShoppingCart?pieId=' + pie.pieId + '>Add to cart</a>' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
$('#pieDiv').append(pieSummaryString);
});
},
error: function (ex) {
alert(ex);
}
});
The database returns the source as "Images/PieImages/applepiesmall.jpg", but when displayed on the page, it becomes https://localhost:44365/Pie/Images/PieImages/applepiesmall.jpg. The addition of "Pie" to the source seems puzzling. The JSON returned by the API is as follows:
{"pieId":1,"name":"Apple Pie","shortDescription":"Our famous apple pies!","price":12.95,"imageThumbnailUrl":"Images/PieImages/applepiesmall.jpg"}