前端显示二进制流图片

最近调了一个第三方的接口,后台直接返回的是一个二进制流的图片,前端需要将它显示,写个博文记录一下,以下是它的代码:

 axios.get('https://ue1-260-mmg.demo.lunit.io/mmg/predictions', {
                responseType: 'arraybuffer',
            }).then(response => {

                return 'data:image/png;base64,' + btoa(

                    new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
                )
            }).then(data => {
                $('#bgImg').css('background-image', "url(" + data + ")")
            })
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Spring Boot 框架的前端页面中显示数据库中的图片,可以通过以下步骤实现: 1. 在数据库中存储图片时,将图片转换为二进制格式存储在数据库中。 2. 在后端代码中,查询数据库获取图片二进制,并将其转换为 BASE64 编码的字符串。 3. 在前端代码中,通过 `<img>` 标签将 BASE64 编码的字符串转换为图片进行显示。 以下是具体的代码实现步骤: 1. 在数据库中创建表,其中包含图片二进制字段,如下所示: ```sql CREATE TABLE `image` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `content` longblob NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 该表包含 id(主键)、name(图片名称)和 content(图片二进制)三个字段。 2. 在后端代码中,查询数据库获取图片二进制,并将其转换为 BASE64 编码的字符串。可以使用以下代码实现: ```java @GetMapping("/image/{id}") public ResponseEntity<byte[]> getImage(@PathVariable Long id) { Image image = imageService.getImageById(id); byte[] content = image.getContent(); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); headers.setContentLength(content.length); return new ResponseEntity<>(content, headers, HttpStatus.OK); } private String convertToBase64(byte[] content) { return Base64.getEncoder().encodeToString(content); } ``` 其中,getImage() 方法用于获取指定 id 的图片二进制,并将其封装为 ResponseEntity 对象返回。convertToBase64() 方法用于将图片二进制转换为 BASE64 编码的字符串。 3. 在前端代码中,通过 `<img>` 标签将 BASE64 编码的字符串转换为图片进行显示。可以使用以下代码实现: ```html <img src="data:image/jpg;base64,${base64Content}" /> ``` 其中,${base64Content} 表示后端代码中获取到的 BASE64 编码的字符串。data:image/jpg;base64, 表示图片的类型为 JPG,并且是以 BASE64 编码的格式进行传输。 注意:在实现过程中,需要注意图片的格式和大小,以及 BASE64 编码字符串的长度限制等问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值