springboot+idea+bootstrap的前台显示图片

接我原来写的那个图片上传，现在写一下如何在前台显示图片

1、因为上面是存储的绝对路径如下图，springboot 显示图片的话是需要配置application.properties，下面贴出来

application.properties配置虚拟路径

spring.http.multipart.location=D:/666/ spring.resources.static-locations=classpath:/META-INF/resources/,\ classpath:/resources/, \ classpath:/static/, \ classpath:/public/, \ file:${spring.http.multipart.location}

这样配置之后就可以直接http://localhost:8888/4a8af5d1-0f48-4227-9cb2-fc2addd88b81.jpg 访问图片了

2、前台jsp页面代码如下，着重看"图片" 那，需要添加formatter

function initTable() { $('#noticeTable').bootstrapTable('destroy'); //Bootstrap分页 $("#noticeTable").bootstrapTable({ url: "/noticeManager/notice/listNotice", //请求地址 method: "post", dataType: "json", contentType: "application/x-www-form-urlencoded", striped: true, //是否显示行间隔色 pageNumber: 1, //初始化加载第一页 pagination: true,//是否分页 sidePagination: 'server',//server:服务器端分页|client：前端分页 pageSize: 5,//单页记录数 pageList: [5, 10, 20, 25, 50, 100],//可选择单页记录数 showRefresh: true,//刷新按钮 queryParamsType: '', queryParams: function queryParams(params) { var temp = { pageNumber: params.pageNumber, pageSize: params.pageSize, title: $("#title").val() , content: $("#content").val() , dtime: $("#dtime").val() , imagepath: $("#imagepath").val() , managerid: $("#managerid").val() }; return temp; }, columns: [{ align: 'center', checkbox: true }, { title: '新闻标题', field: 'title', width: 100, align: 'center' } , { title: '新闻内容', field: 'content', width: 100, align: 'center' } , { title: '发布时间', field: 'dtime', width: 100, align: 'center' } , { title: '图片', field: 'imagepath', width: 100, align: 'center', formatter: function (value) { var img = '<img style="width:120px;height:80px;" src="' + value + '"/>' return img; } }, { title: '发布者', field: 'name', width: 100, align: 'center' } , { title: '操作', field: 'noticeid', align: 'center', width: 100, formatter: function (value, row, index) { var edit = '<input class="btn btn-primary" type="button" value="编辑" οnclick="edit(\'' + row.noticeid + '\')" />'; var del = '<input class="btn btn-primary" type="button" value="删除" οnclick="del(\'' + row.noticeid + '\')" />'; return edit + del; } }] }); }

3、显示情况如下

后面会有编辑操作，重新上传图片的操作

各位大哥觉得还好的给点个赞