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

我通过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);
            }
        });

$.ajax({
键入：“GET”，
url:“/api/PieData”，
数据类型：“json”，
成功：函数（jsonData）{
if（jsonData==null）{
警报（“未返回数据”）；
返回；
}
$.each（jsonData，函数（索引，饼图）{
变量pieSummaryString=''+
'  ' +
'     ' +
'      ' +
''馅饼，价格+''+
'         ' +
'             ' +
'         ' +
“
”+pie.shortDescription+”
'+
'    ' +
'    ' +
“
”+
'             ' +
“
”+
'     ' +
'  ' +
'';
$（'#pieDiv'）.append（pieSummaryString）；
});
},
错误：函数（ex）{
警报（ex）；
}
});

数据库返回的源代码为“Images/PieImages/applepiesmall.jpg”，页面上生成的图像源代码为。为什么“饼”会附加到源文件中？ 通过API返回JSON

---

{“pieId”：1，“name”：“Apple Pie”，“shortDescription”：“我们著名的苹果派！”，“price”：12.95，“imageThumbnailUrl”：“Images/PieImages/applepiesmall.jpg”}

将“Pie”插入图像URL的主要原因是JSON图像路径中缺少前斜线

“imageThumbnailUrl”：“Images/PieImages/applepiesmall.jpg”

应该是

“imageThumbnailUrl”：“/Images/PieImages/applepiesmall.jpg”

---

在图像前面打开

/

，意味着图像路径应该从网站的根目录计算出来。当打开的

/

丢失时，将从当前web目录（在本例中为您的饼图控制器）计算映像路径

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

“imageThumbnailUrl”：“Images/PieImages/applepiesmall.jpg”

应该是

“imageThumbnailUrl”：“/Images/PieImages/applepiesmall.jpg”

---

在图像前面打开

/

，意味着图像路径应该从网站的根目录计算出来。当打开的

/

丢失时，将从当前web目录（在本例中为您的饼图控制器）计算映像路径

如果返回

/Images/PieImages/applepiesmall.jpg

（请注意前斜杠），是否仍会遇到相同的问题？从数据库返回的路径是前斜杠。我主要关心的是为什么要将“Pie”添加到图像源中。缺少前面的斜杠会使图像请求相对于您所在的目录（您的控制器

Pie

如

http://localhost/Pie/Images/...

）在这里。添加前斜杠应该使请求相对于站点根（

http://localhost/Images/...

）。您的示例JSON显示了从图像url中删除的前斜杠<代码>“imageThumbnailUrl:“Images/PieImages/applepiesmall.jpg”谢谢@Tommy在数据库中的图像源的开头添加前斜杠已修复该问题。每次都有很多感谢。我将把这些评论复制到一个答案中，这样你就可以接受并结束了。很高兴它为你工作！如果返回

/Images/PieImages/applepiesmall.jpg

（请注意前斜杠），是否仍会遇到相同的问题？从数据库返回的路径是前斜杠。我主要关心的是为什么要将“Pie”添加到图像源中。缺少前面的斜杠会使图像请求相对于您所在的目录（您的控制器

Pie

如

http://localhost/Pie/Images/...

）在这里。添加前斜杠应该使请求相对于站点根（

http://localhost/Images/...

）。您的示例JSON显示了从图像url中删除的前斜杠<代码>“imageThumbnailUrl:“Images/PieImages/applepiesmall.jpg”谢谢@Tommy在数据库中的图像源的开头添加前斜杠已修复该问题。每次都有很多感谢。我将把这些评论复制到一个答案中，这样你就可以接受并结束了。很高兴它为你工作！