技術標籤：前端

場景：圖片檔案儲存在專案的一個資料夾裡，資料庫儲存著圖片的路徑。前端需要獲取到圖片的路徑並展示。

前端：通過獲取的路徑，拼接圖片的src。

//域名
var host="http://"+window.location.host;
function editChat(contactWayId) {
    $.post( "/contactWay/getContactChatById", {"contactWayId": contactWayId}, function (r) {
        if(r.code==200){
            var d=r.data;
            var html="";
            for (var i=0;i<d.length;i++){
                //此處拼接src的地址
                var chatQrimgUrl=host+"/contactWay/getImage?filePath="+d[i].chatQrimgUrl;  

                //組織html程式碼。展示到介面            
                 html+=" <tr data-index=\"0\">\n" +
                    "                                                        <td style=\"text-align: center; \">\n" +
                    "                                                            <a href=\"http://\" target=\"_blank\">"+chatName+"</a>\n" +
                    "                                                        </td>\n" +
                    "                                                        <td style=\"text-align: center; \">\n" +
                    "                                                            <img style=\"width:120px;height:120px\" src="+chatQrimgUrl+">\n" +
                    "                                                        </td>\n" +
                    "                                                    </tr>";
            }
            $("#addtr").append(html);
        }
    })
}
 

後端：

 @RequestMapping("/contactWay/getImage")
    @ResponseBody
    public void getImagesId(HttpServletResponse hsp,String filePath) {
        File imageFile = new File(filePath);
        if (imageFile.exists()) {
            FileInputStream fis = null;
            OutputStream os = null;
            try {
                fis = new FileInputStream(imageFile);
                os = hsp.getOutputStream();
                int count = 0;
                byte[] buffer = new byte[1024 * 8];
                while ((count = fis.read(buffer)) != -1) {
                    os.write(buffer, 0, count);
                    os.flush();
                }

            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    fis.close();
                    os.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

        }
    }