I have an image stored in MYSQL as BLOB. Now I have retrieved it as byte array, but i can not figure out how to show it in image tag.I searched for available answers but none of them helped me so far. And when I call my service from postman the image comes up red. Below is the code
Service layer
@GET
@Path("/downloadLogo/{merchantId}")
@Produces({"image/png", "image/jpeg"})
public Response downloadLogo(@PathParam("merchantId") Long merchantId) {
MerchantImage merchantImage=this.merchantService.findMerchantImage(merchantId);
ResponseBuilder responseBuilder = Response.ok(merchantImage.getMerchantLogo()); //getMerchantLogo() gets the byte array
responseBuilder.header("Content-Disposition", "attachment; filename=\""+merchantImage.getLogoName()+"\"");
return responseBuilder.build();
}
Ajax request
function downloadData(data,serviceUrl, element){
if(!authorizedimage()){return false;};
$.support.cors = true;
$.ajax({
type: "GET",
url: serviceUrl,
crossDomain: true,
dataType: "binary",
headers:{'Content-Type':'image/png','X-Requested-With':'XMLHttpRequest'},
processData: false,
success: function (data, status, jqXHR) {alert("success");
if (typeof fnSuccess !== 'undefined' && $.isFunction(fnSuccess)) {
fnSuccess('image', data, element);
}
},
error: function (jqXHR, status) {
$('#image_view').append('<img id="uploaded_image" src="data:image/png;base64,'+[jqXHR.responseText]+'">');
console.log(jqXHR, typeof jqXHR.responseText);
if(jqXHR.statusText == "Unauthorized"){
logout();
}
}
});
}