Display a Blob image from MySQL database using Angular 5

Question

I have a class with a Blob field called logo, when i want to display this field i am not sure how to do it in Angular, and if Blob is the best type to store images knowing that the app is a small app with few users.

Company.java

@Entity
public class Company implements Serializable{
    @Id 
    @GeneratedValue(strategy=GenerationType.IDENTITY)   
    @Column(name = "id", updatable = false, nullable = false)
    private Long id;
    @Column(name = "name", unique = true, nullable = false)
    private String name;  
    @Column(name = "activity", nullable = false)
    private String activity;
    @Column(name = "address", nullable = false)
    private String address;
    @Column(name = "city", nullable = false)
    private String city;
    @Column(name = "logo", nullable = true)
    private Blob logo;
}

model.company.ts

export class Company{
  public id:any;
  public name:string;
  public activity:string;
  public address:string;
  public city:string;
  public logo:Blob;
}

when i do it this way it doesn't show anything even other fields which are strings.

<tr *ngFor="let c of pageCompanies?.content">
    <td class="py-1"><img src="{{c.logo}}" class="rounded-circle" width="45" height="45"></td>
</tr>

I recommend you, change logo field to String, upload files to the server, and save the file path — erajuan
– erajuan, Commented Jul 3, 2018 at 17:18

Marc Goritschnig · Accepted Answer · 2018-07-03 17:04:20Z

1

Have you saved your logo as base64??

If not try the following:

<tr *ngFor="let c of pageCompanies?.content">
   <td class="py-1"><img src="data:image/png;base64,{{c.logo}}" class="rounded-circle" width="45" height="45"></td>
</tr>

answered Jul 3, 2018 at 17:04

Marc Goritschnig

215 bronze badges

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

Collectives™ on Stack Overflow

Display a Blob image from MySQL database using Angular 5

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related