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、顯示情況如下

後面會有編輯操作，重新上傳圖片的操作

各位大哥覺得還好的給點個贊