对于springboot项目中编写订单列表时的用ajax绑定前端是出现的图片下面这种情况应该怎么解决？
订单列表数据库截图如下：
ajax绑定前端代码：
<script type="text/javascript">
$(document).ready(function () {
showOrder();
showOrderInfo();
});
//输出订单全部信息
function showOrder() {
$.ajax({
url: "/orders/order",
dataType: "JSON",
type:"POST",
success:function (json) {
if (json.state==200)
{
let list = json.data;
console.log(list.length);
$("#order-list").empty();
for (let i=0;i<list.length;i++)
{
let trs='<div class="panel-heading">\n' +
'<p class="panel-title">\n' +
'订单号：#{oid}，下单时间：#{orderTime}， 收货人：#{recvName}\n' +
'</p>\n' +
'</div>\n' +
'<div class="panel-body">\n' +
'<table class="orders-table" width="100%">\n' +
'<thead>\n' +
'<tr>\n' +
'<th width="15%"></th>\n' +
'<th width="30%">商品</th>\n' +
'<th width="8%">单价</th>\n' +
'<th width="8%">数量</th>\n' +
'<th width="9%">小计</th>\n' +
'<th width="10%">售后</th>\n' +
'<th width="10%">状态</th>\n' +
'<th width="10%">操作</th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody id="order-product-list-#{oid1}" class="orders-body">\n' +
'</tbody>\n' +
'</table>\n' +
'<div>\n' +
'<span class="pull-right">订单总金额：¥#{totalPrice}</span>\n' +
'</div>\n' +
'</div>';
trs = trs.replace(/#{orderTime}/g, crtTimeFtt(list[i].order_time));
trs = trs.replace(/#{recvName}/g, list[i].recv_name);
trs = trs.replace(/#{oid}/g, list[i].oid);
trs = trs.replace(/#{totalPrice}/g, list[i].total_price);
trs = trs.replace(/#{oid1}/g, list[i].oid);
$("#order-list").append(trs);
showOrderInfo(list[i].oid);
}
}
},
error:function (xhr) {
alert("信息加载时产生错误！"+xhr.message);
}
})
}
// //创建时间格式化显示
function dateFtt(fmt,date)
{ //author: meizz
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
//创建时间格式化显示
function crtTimeFtt(value,row,index)
{
var crtTime = new Date(value);
return top.dateFtt("yyyy-MM-dd hh:mm:ss",crtTime);//直接调用公共JS里面的时间类处理的办法
}
//输出订单商品信息
function showOrderInfo(oid) {
$.ajax({
url: "/orders/orderProductInfo",
data: {
oid:oid
},
dataType: "JSON",
type:"POST",
success:function (json) {
if (json.state==200)
{
let list = json.data;
console.log(list.length);
for (let i=0;i<list.length;i++)
{
let tr = '<tr>\n' +
'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
'<td>#{title}</td>\n' +
'<td>¥<span>#{price}</span></td>\n' +
'<td>#{num}件</td>\n' +
'<td>¥<span>#{itemTotalPrice}</span></td>\n' +
'<td><a href="#">申请售后</a></td>\n' +
'<td>\n' +
'<div>#{status}</div>\n' +
'<div><a href="orderInfo.html">订单详情</a></div>\n' +
'</td>\n' +
'<td><a href="#" class="btn btn-default btn-xs">确认收货</a></td>\n' +
'</tr>';
tr = tr.replace(/#{pid}/g, list[i].pid);
tr = tr.replace(/#{image}/g, list[i].image);
tr = tr.replace(/#{title}/g, list[i].title);
tr = tr.replace(/#{price}/g, list[i].price);
if (list[i].status==0)
{
tr = tr.replace(/#{status}/g,"待付款");
}
if (list[i].status==1)
{
tr = tr.replace(/#{status}/g,"待发货");
}
if (list[i].status==2)
{
tr = tr.replace(/#{status}/g,"待签收");
}
if (list[i].status==3)
{
tr = tr.replace(/#{status}/g,"确认收货");
}
tr = tr.replace(/#{num}/g, list[i].num);
tr = tr.replace(/#{oid}/g, list[i].oid);
tr = tr.replace(/#{itemTotalPrice}/g, list[i].num * list[i].price);
//获取动态创建的订单商品列表
$("#order-product-list-"+oid).append(tr);
}}},
error:function (xhr) {
alert("信息加载时产生错误！"+xhr.message);
}
})
}
</script>
