如何在 ionic 4 页面中显示存储在 postgres db（作为 base64）中的图像？

Question

你好，我的 table 中有 spring 启动应用程序，我将图像存储为 byte [] arr。通过获取请求，我将结果发送到离子应用程序以显示。但是里面不显示图片。

这是代码， `

Java Spring 靴子（型号）

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

Java Spring 引导控制器

 @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);
    }

Angular/Ionic

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

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

这是我查过的一些相关问题；

How to display base64 image on iPhone in Ionic 4

非常感谢。感谢任何帮助

编辑

这是来自 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)

将此添加到您的 angular/ionic

HTML

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

将此行添加到您的 HTML。

它会起作用。

如何在 ionic 4 页面中显示存储在 postgres db（作为 base64）中的图像？

How to display image stored in postgre db (as base64) in ionic 4 page?

base64

ionic-framework

angular

ionic4

Java Spring 靴子（型号）

Java Spring 引导控制器

Angular/Ionic

HTML

非常感谢。感谢任何帮助

编辑

.TS

HTML