将图片存储到数据库到数据库有两种形式:
- 将图片地址存储到数据库中,将图片显示到界面上,直接从数据库取图片地址就行了。
- 将图片直接存储到数据库中,这种形式简单粗暴,对图片的管理比较方便。如果存储的图片过多,会加重数据库的负担。
总之,这两种形式有利也有弊,看个人需要吧!!!
下面进入正题,如何将存储在数据库中的图片,显示在界面上呢? 别慌!!!,相当简单!!
以下是实现代码:
@RequestMapping(value = "/images/{id}", method = RequestMethod.GET)
public ResponseEntity<byte[]> getImage(@PathVariable("id") Long id) {
Image image = imageService.getPicByPrimaryKey(id);
return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(image.getImage());
}
我们可以看到后台部分的代码相当简单,保存图片到数据库时,是以字节数组的形式保存的,所以当我们需要显示该图片时,我们只需要在后台获取到该图片存储在数据库中的字节数组,然后传到前台就可以ok啦!
前台代码如下:(界面 用 react 实现 )
const transferPicUrl = `localhost:8080/images/${图片id}`;
<img alt="receive pic" src={transferPicUrl } className={styles.img} />
不管前台用什么语言实现,后台的实现原理都是一样的。
以上就是我个人的一些小结,有不对的地方,欢迎指点批评!!!