How to display an MySQL Blob inside an Angular Application?

Solution

I fixed the problems by creating two new methods. In the first step, I create the getItemBlob Method to extract the Blob outside the database. In the next step, I create the method getItemImage in the controller class. These methods search the correct blob inside the database by the itemID convert the Blob in an InputStream and in the last step inside a ServletOutputStream.

In the HTML part, I used a normal img Tag and mapped the server hostname, port and the getItemImage method together to display the image.

Java Class (Item Services)

public Blob getItemBlob(String id) throws SQLException{
    Blob image = null;
    
    Connection conn = new MYSQLAccess().getConnection();
    String sql = "SELECT ITEMDATA FROM OWNITEM WHERE OWNITEMID = ? AND ACTIVE = 1";
    PreparedStatement pstm = conn.prepareStatement(sql);
    pstm.setString(1, id);
    ResultSet rs = pstm.executeQuery();
    
    while (rs.next()) {
        image = rs.getBlob("ITEMDATA");
    }
    
    conn.close();
    return image;
}

Java Class (Item Controller)

@ResponseBody
@CrossOrigin(origins = "http://localhost:8100")
@RequestMapping(value = "/getItemImage")
public void getItemImage(@RequestParam("id") String id, HttpServletResponse response) throws IOException, SQLException {
    ServletOutputStream out = response.getOutputStream();
    ItemServices myItemServices = new ItemServices();
    Blob image = myItemServices.getItemBlob(id);
    
    response.setContentType("image/jpg");
    InputStream in = image.getBinaryStream();
    int length = (int)image.length();
    int bufferSize = 1920;
    byte[] buffer = new byte[bufferSize];
    
    while ((length = in.read(buffer)) != -1) {
        out.write(buffer, 0, length);
    }
    
    in.close();
    out.flush();
}

Java Class (Subscriber Controller)

@SuppressWarnings("unchecked")
public JSONObject getSubscribersItems(String email) throws SQLException, ClassNotFoundException {
    JSONObject subscribersItemsJsonObject = new JSONObject();
    JSONArray subscribersItemsJsonArray = new JSONArray();
    ArrayList<String> subscribersArrayList = this.getSubscriber(email);
    
    Connection conn = new MYSQLAccess().getConnection();        
    String sql = "SELECT T1.OWNITEMID,T1.ITEMNAME,T2.USERNAME,T2.COUNTRY FROM OWNITEM T1,CUSTOMER T2 WHERE T1.EMAIL = T2.EMAIL AND T1.EMAIL = ? AND T1.ITEMDATA != 'NULL' AND T2.ACTIVE = 1";
    PreparedStatement pstm = conn.prepareStatement(sql);
    
    for (int i = 0; i < subscribersArrayList.size(); i++) {
        pstm.setString(1, subscribersArrayList.get(i));

        ResultSet rs = pstm.executeQuery();
        
        while (rs.next()) {
            subscribersItemsJsonObject = new JSONObject();
            
            subscribersItemsJsonObject.put("itemID", rs.getInt("OWNITEMID"));
            subscribersItemsJsonObject.put("itemName", rs.getString("ITEMNAME"));
            subscribersItemsJsonObject.put("username", rs.getString("USERNAME"));
            subscribersItemsJsonObject.put("country", rs.getString("COUNTRY"));
            
            subscribersItemsJsonArray.add(subscribersItemsJsonObject);
        }
    }

    subscribersItemsJsonObject = new JSONObject();
    subscribersItemsJsonObject.put("items", subscribersItemsJsonArray);
    
    conn.close();
    return subscribersItemsJsonObject;
}

IONIC HTML

<ion-list>
    <ion-item-sliding *ngFor="let items of subscriberItemsItemList">
      <button ion-item (click)="openItems(items)">
        <ion-avatar item-start>
            <img src="{{ itemImageUrl }}/getItemImage?id={{ cars.itemID }}" />
        </ion-avatar>
        <h2>{{ items.username }}</h2>
        <p>{{ items.country }}</p>
        <ion-note item-end *ngIf="items.note">{{ items.note }}</ion-note>
      </button>
    </ion-item-sliding>
</ion-list>

IONIC TypeScript/ Angular

getDesignCars() {
    let params = {"email": this.user.getEmail()};
    
    this.cars.homeCars(params).then(data => {
        this._subscriberCarsList = data;
        this._subscriberCarsList = this._subscriberCarsList.value.cars;
        this.subscriberCarsItemList = this._subscriberCarsList;
    });
}