To display a Base64 image in AngularJS

I have inserted a Base64 image to a database using this Java code:

FileInputStream mFileInputStream = new FileInputStream("C:\basicsworkspace\base64upload\src\main\resources\basic.png");
ByteArrayOutputStream bos = new ByteArrayOutputStream();
byte[] b = new byte[1024];
int bytesRead = 0;
while ((bytesRead = mFileInputStream.read(b)) != -1) {
    bos.write(b, 0, bytesRead);
}
byte[] ba = bos.toByteArray();
//byte[] encoded = Base64.getEncoder().encode(ba); // Util
byte[] encoded = Base64.encodeBase64(ba); // Apache
connection = DriverManager.getConnection(connectionString);
String insertSql = "INSERT INTO test (image) VALUES (?)" ;
prepsInsertProduct.setBytes(encoded);
System.out.println(insertSql);
prepsInsertProduct = connection.prepareStatement(insertSql);
System.out.println(prepsInsertProduct.execute());

JavaScript
​x
 
FileInputStream mFileInputStream = new FileInputStream("C:\basicsworkspace\base64upload\src\main\resources\basic.png");ByteArrayOutputStream bos = new ByteArrayOutputStream();byte[] b = new byte[1024];int bytesRead = 0;while ((bytesRead = mFileInputStream.read(b)) != -1) {    bos.write(b, 0, bytesRead);}byte[] ba = bos.toByteArray();//byte[] encoded = Base64.getEncoder().encode(ba); // Utilbyte[] encoded = Base64.encodeBase64(ba); // Apacheconnection = DriverManager.getConnection(connectionString);String insertSql = "INSERT INTO test (image) VALUES (?)" ;prepsInsertProduct.setBytes(encoded);System.out.println(insertSql);prepsInsertProduct = connection.prepareStatement(insertSql);System.out.println(prepsInsertProduct.execute());​

But if I try to display the image in AngularJS using it, it is not displaying the image. In SQL Server I have saved my image as varbinary(max) and in AngularJS code,

config(function ($compileProvider) {
    console.log($compileProvider.imgSrcSanitizationWhitelist());
})

<img src="choice:image/png;base64,{{choice.Icon}}">

JavaScript
 
config(function ($compileProvider) {    console.log($compileProvider.imgSrcSanitizationWhitelist());})​<img src="choice:image/png;base64,{{choice.Icon}}">​

But I am getting only bytes with a message like this:

unsafe:choice:image/png;base64,6956424F5277304B47676F414141414E535568455567…

JavaScript
 
unsafe:choice:image/png;base64,6956424F5277304B47676F414141414E535568455567…​

Where am I going wrong? The image is in PNG format.

Answer

In POJO I made changes for byte[] and it worked. I have datatype with String and modified to byte[] but Base64 images didn’t displayed but t is displaying only byte array images.

Advertisement

Answer