如何在离子4页面中显示存储在postgre db(作为base64)中的图像?

Question

您好，我的表中有弹簧启动应用程序，我将图像存储为字节 [] arr。 通过 get 请求，我将我的结果发送到 ionic 应用程序到显示器。但是，在其中不显示图像。

这是代码， `

Java Spring Boot (Model(

@Column(name = "image")
public byte []getImage() {
return image;
}
public void setImage(byte [] image) {
this.image = image;
}

Java Spring Boot Controller

@GetMapping("/drivers/{id}")
public ResponseEntity<Drivers> getEmployeeById(@PathVariable(value = "id") Long driverId)
throws Exception {
Drivers employee = driverRepository.findById(driverId)
.orElseThrow(() -> new Exception("Employee not found for this id :: " + driverId));
return ResponseEntity.ok().body(employee);
}

角形/离子

etchAlarms(){
return this.http.get<any>('http://localhost:8080/api/getAllDrivers')
.subscribe(transformedData =>{
this.alarmsChanged.next(transformedData);
});
}

.HTML

<img src="data:image/png;base64,{{alarms.image}}"/>

我几乎阅读了与此相关的所有问题，但不幸的是我无法解决问题。

以下是我检查过的一些相关问题;

如何在 Ionic 64 中在 iPhone 上显示 base4 图像

如何使用角度js在离子4中显示图像

Base64 编码的图像未显示在 ionic 框架应用程序中

离子/角度JS base64图像不会显示

谢谢。任何帮助不胜感激

编辑

这是来自chrome控制台的错误

unsafe:data:image/png;base64,:1 GET unsafe:data:image/png;base64, net::ERR_UNKNOWN_URL_SCHEME

Answer 1

.TS

import { DomSanitizer } from '@angular/platform-browser';
constructor(public _DomSanitizationService: DomSanitizer)

将其添加到您的角度/离子

.HTML

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,'+alarms.image)"width="50%" height="50%" alt="Image"/>

将此行添加到您的 HTML 中。

它会起作用。