要实现的效果图
其实要实现上面这个将图片显示到layui的数据表格上,其实很简单。
利用的是layui数据表格里面的templet - 自定义列模板。
一开在表格渲染那里定义一个自定义列。
然后给他写进html的代码。
function imagebox(data) {
var PaymentID = data.PaymentID;
var img = "<img src='selectPaymentLog?PaymentID=" + PaymentID + "' alt='Alternate Text' style='width:100px;height:40px;'/>";
return img;
}
我们添加的img的src里面给他放一个跟ID查出对应图片要调用的方法的连接就可以了。
这要只要我们调用那个方法,那个方法就可以把数据库的图片查询出来,然后图片就显示出来了。
下面我们来看一下查询这个图片的方法。
代码如下:
public ActionResult selectPaymentLog(int PaymentID)
{
try
{
var PaymentLogimg = (from tbPayment in myModel.SZ_Payment
where tbPayment.PaymentID == PaymentID
select new
{
tbPayment.PaymentLog
}).Single();
byte[] stuImg = PaymentLogimg.PaymentLog;
return File(stuImg, @"image/jpg");
}
catch (Exception e)
{
Console.WriteLine(e);
return Json("failed", JsonRequestBehavior.AllowGet);
}
}
这样就可以做到刚开始的那张图片的效果了。