ajax - 图像未通过 AJAX 请求 ASP MVC 核心 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);
}
});
数据库返回的来源为“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"}
解决方案
将“Pie”插入图像 URL 的主要原因是 JSON 图像路径中缺少正斜杠。
"imageThumbnailUrl":"Images/PieImages/applepiesmall.jpg"
应该
"imageThumbnailUrl":"/Images/PieImages/applepiesmall.jpg"
图片前面的开头/
表示图片路径应该从网站的根目录开始计算。当/
缺少开口时,图像路径是从当前的 web 目录计算出来的,在这种情况下,是你的饼图控制器。
推荐阅读
- angularjs - Tabs navigation issue with search button?
- javascript - 匿名函数名称未显示
- java - 使用java在EPS文件中添加元数据
- kotlin - 如何从 Kotlin AllOpen 插件中排除注释?
- java - 禁用 NamedParameterJdbcTemplate 缓存
- javascript - find 方法如何与数组一起使用?
- c++ - 如何从文件 HANDLE 获取包含目录的 HANDLE?
- c - c1 如何在 va_arg 中获取这些值?
- python - Python 子类实例无法访问父启动变量
- python - 使用 matplotlib 查看图像时如何解决“类型错误:图像数据的尺寸无效”错误