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

【问题标题】：Image not loading via AJAX request ASP MVC core 3.0图像未通过 AJAX 请求 ASP MVC 核心 3.0 加载
【发布时间】：2020-02-02 16:05:01
【问题描述】：

我正在通过 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。为什么将“Pie”附加到源？ API 返回 JSON

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

【问题讨论】：

如果你返回/Images/PieImages/applepiesmall.jpg（注意前面的斜线），你还会遇到同样的问题吗？
从数据库返回的路径是正斜杠的。我主要关心的是为什么将“Pie”添加到图像源中。
缺少前面的斜线导致图像请求相对于您所在的目录（您的控制器Pie 与http://localhost/Pie/Images/... 相同）。添加前斜杠应该使请求相对于您的站点根目录 (http://localhost/Images/...)。您的示例 JSON 显示从图像 url 中删除的正斜杠。 "imageThumbnailUrl":"Images/PieImages/applepiesmall.jpg"
谢谢@Tommy 将前斜杠添加到数据库中图像源的开头已解决问题。非常感谢
随时。我要将这些 cmets 复制到答案中，以便您接受并关闭。很高兴它为你工作！

标签： ajax asp.net-mvc .net-core

【解决方案1】：

将“Pie”插入图片 URL 的主要原因是您的 JSON 图片路径中缺少正斜杠。

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

应该是

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

Images前面开头的/表示图片路径应该从网站的根目录开始计算。当缺少开头的/ 时，图像路径是从当前的 Web 目录计算出来的，在这种情况下，是你的饼图控制器。

【讨论】：