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、显示情况如下

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

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