场景:图片文件存储在项目的一个文件夹里,数据库存储着图片的路径。前端需要获取到图片的路径并展示。
前端:通过获取的路径,拼接图片的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();
}
}
}
}