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

Question

Hello I have spring boot application in my table I store image as byte [] arr. Via the get request I send the my result to the ionic app to the display. However in it does not display image.

Here is the code, `

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

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

I read almost all the question related this, but unfortunately I couldnt solve the problem.

Here is some of the related questions I have checked;

How to display base64 image on iPhone in Ionic 4

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

Thank You very much. Any help is appreciated

EDIT

Here is error from chrome console

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

can you elaborate - what errors you see? how sure you are that the service call (getAllDrivers) returns actual base64 string? — Sergey Rudenko
– Sergey Rudenko, Commented Jan 31, 2020 at 3:49
I'm pretty sure a Java byte array for an image is not the same thing as a base64 encoded image. You may find some help encoding and decoding the byte array in Java with this post: baeldung.com/java-base64-encode-and-decode I also saw a stack exchange tip showing this as a solution: encodedfile = new String(Base64.encodeBase64(bytes), "UTF-8"); — Cody Burleson
– Cody Burleson, Commented Jan 31, 2020 at 5:16
@CodyBurleson I store images in the postgree db, and my colomn type in postgre db is bytea. So what should I do ? Should I store images as an String in db ? — ozer
– ozer, Commented Jan 31, 2020 at 7:45
@ozer It seems to me that when Java methods like encodedfile = new String(Base64.encodeBase64(bytes), "UTF-8"); are available, you should be able to continue storing your image in the database as bytes. You just need to make the conversion from the bytes to Base64 by the time your reach the view layer for image rendering. This could happen in the getter method of the service that accesses the database (e.g. getImageBytesAsBase64() ) or in the controller that sits between the service and the view, or in a helper class that multiple controllers use. — Cody Burleson
– Cody Burleson, Commented Feb 7, 2020 at 17:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

.TS

import { DomSanitizer } from '@angular/platform-browser';

constructor(public _DomSanitizationService: DomSanitizer)

Add this to your angular/ionic

HTML

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

Add this line to your HTML.

It will work.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 31, 2020 at 8:53

GhostDede

4464 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

Java Spring Boot (Model)

Java Spring Boot Controller

Angular/Ionic

HTML

Thank You very much. Any help is appreciated

EDIT

1 Answer 1

.TS

HTML

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Java Spring Boot (Model)

Java Spring Boot Controller

Angular/Ionic

HTML

Thank You very much. Any help is appreciated

EDIT

1 Answer 1

.TS

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related