【问题标题】：How to display image stored in postgre db (as base64) in ionic 4 page?如何在ionic 4页面中显示存储在postgres db（作为base64）中的图像？
【发布时间】：2020-01-31 16:53:49
【问题描述】：

您好，我的表中有 Spring Boot 应用程序，我将图像存储为 byte [] arr。通过获取请求，我将我的结果发送到离子应用程序到显示器。但是其中不显示图像。

这里是代码， `

Java Spring Boot（模型）

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

Java Spring Boot 控制器

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

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

How to display image in ionic 4 using angular js

Base64 encoded image is not displaying in ionic framework apps

Ionic / AngularJS base64 image won't display

非常感谢。任何帮助表示赞赏

编辑

这是来自 chrome 控制台的错误

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

【问题讨论】：

你能详细说明一下 - 你看到了什么错误？您如何确定服务调用 (getAllDrivers) 返回实际的 base64 字符串？
我很确定图像的 Java 字节数组与 base64 编码图像不同。您可以通过这篇文章在 Java 中对字节数组进行编码和解码找到一些帮助：baeldung.com/java-base64-encode-and-decode 我还看到了一个堆栈交换提示，将其作为解决方案：encodedfile = new String(Base64.encodeBase64(bytes), "UTF-8");
@SergeyRudenko 我添加了错误。
@CodyBurleson 我将图像存储在 postgree 数据库中，而我在 postgre 数据库中的列类型是 bytea。所以我该怎么做？我应该将图像作为字符串存储在数据库中吗？
@ozer 在我看来，当encodedfile = new String(Base64.encodeBase64(bytes), "UTF-8"); 等Java 方法可用时，您应该能够继续将图像以字节形式存储在数据库中。您只需要在到达视图层进行图像渲染时将字节转换为 Base64。这可能发生在访问数据库的服务的 getter 方法中（例如 getImageBytesAsBase64() ）或位于服务和视图之间的控制器或多个控制器使用的帮助器类中。

标签： angular ionic-framework base64 ionic4

【解决方案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。

它会起作用的。

【讨论】：