将存储在数据库中的图片,以二进制流的方式显示在界面上(基于ssm框架,简单方便)

将图片存储到数据库到数据库有两种形式:

  • 将图片地址存储到数据库中,将图片显示到界面上,直接从数据库取图片地址就行了。
  • 将图片直接存储到数据库中,这种形式简单粗暴,对图片的管理比较方便。如果存储的图片过多,会加重数据库的负担。

总之,这两种形式有利也有弊,看个人需要吧!!!

下面进入正题,如何将存储在数据库中的图片,显示在界面上呢? 别慌!!!,相当简单!!

 以下是实现代码:

 @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} />
               

不管前台用什么语言实现,后台的实现原理都是一样的。

以上就是我个人的一些小结,有不对的地方,欢迎指点批评!!!

猜你喜欢

转载自blog.csdn.net/qq_33151859/article/details/81392303
今日推荐