图像未通过 AJAX 请求 ASP MVC 核心 3.0 加载

Question

我正在通过 AJAX 请求从 API 控制器获取数据，所有数据都已正确加载，包括图像源，但我不确定为什么控制器名称附加到图像源并导致链接断开 这是我的 AJAX 请求代码

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

数据库返回的源是"Images/PieImages/applepiesmall.jpg"，页面上生成的图像源是 https://localhost:44365/Pie/Images/PieImages/applepiesmall.jpg。为什么"馅饼"被附加到源头？ 通过 API 返回的 JSON 数据

{"pieId":1,"name":"Apple Pie","shortDescription":"Our famous apple pies!","price":12.95,"imageThumbnailUrl":"Images/PieImages/applepiesmall.jpg"}

Answer 1

将"Pie"插入图像 URL 的主要原因是因为 JSON 图像路径中缺少前斜杠。

"imageThumbnailUrl":"Images/PieImages/applepiesmall.jpg"

应该是

"imageThumbnailUrl":"/Images/PieImages/applepiesmall.jpg"

图像前面的开头/表示图像路径应从网站的根目录计算。 当缺少开头/时，将从当前 Web 目录(在本例中为饼图控制器(计算图像路径。