图片的显示常用的2种方式。
1.图片上传后把图片的位置存放在数据库。显示时用<img src="路径"/>
2.图片上传后把图片存放在数据库中，推荐用blob类型存放。显示时用<img src="data:image/png;base64,图片的base64码">
下文介绍第二种。
java 用 byte[] 接收blob数据。如果使用的是springMVC且用@ResponseBody。则直接返回对象就可以了，SpringMVC可以自动的帮你将对象中的byte[]转换成base64。
现在使用返回对象的方式：
准备、数据库数据。
一、控制层测试代码
@ResponseBody
@GetMapping("/bytes/{id}")
public Cs bytes(@PathVariable String id) {
return csMapper.selectByPrimaryKey(id);
} 二、javabean代码
public class Cs {
private String id;
private byte[] pic;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public byte[] getPic() {
return pic;
}
public void setPic(byte[] pic) {
this.pic = pic;
}
} 三、测试结果
四、页面代码
<script type="text/javascript" src="./static/js/jquery.js"></script>
<body>
<img id="test" src="">
</body>
<script type="text/javascript">
$(function() {
$.get("bytes/1",function (data) {
$("#test").attr("src","data:image/png;base64,"+data.pic);
},"json");
}); 五、效果
只返回base64字符串的方式：
一、控制层测试代码
@ResponseBody
@GetMapping(value="/bytes2/{id}")
public String bytes2(@PathVariable String id) {
byte[] bytes = csMapper.selectByPrimaryKey(id).getPic();
return Base64.encodeBase64String(bytes);
} 二、测试结果
三、页面代码
<script type="text/javascript">
$(function() {
$.get("bytes2/1",function (data) {
$("#test").attr("src","data:image/png;base64,"+data);
});
}); 四、效果