CODEWITHSUNDEEP
angularionic-frameworkbase64ionic4
ozer
ozer

Reputation: 241

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

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

Upvotes: 1

Views: 1341

Answers (1)

GhostDede
GhostDede

Reputation: 446

.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.

Upvotes: 1

Related Questions