display byte array as image in angular js
Seems like your image
is not base64 encoded string but still that byte array. You need to encoded it first in order to use it like this <img data-ng-src="data:image/PNG;base64,{{image}}">
Check the documentation AngularJS - Show byte array content as image
You can also try this approach https://gist.github.com/jonleighton/958841
axn7975
Updated on June 04, 2022Comments
-
axn7975 almost 2 years
I have an image in database. I want to retreive the image and display it in web page using angular js. After fetching data i have byte array. How do i send the data to the html page. I am having issues with the below code.. Kindly help.
When i click the link to view the image, page is sending 2 get requests to the server instead of one. It is sending request continuously for 2 times.Note : I have tried using the below link.. But it didn't work
AngularJS - Show byte array content as image
Below is my js file
app.controller('aboutCtrl', function($scope,$http,$location) { $scope.message = 'This is Add new order screen'; var url = '/Angular/login'; $http.get(url).success(function(result) { $scope.image = result.image; }) }); //html <img data-ng-src="data:image/PNG;base64,{{image}}">
Java class file
public String getImage() throws FileNotFoundException{ String byteStr=null; try { Connection con= DbConnect.getConnection(); String sql ="select * from image_data where id=1"; PreparedStatement ps=con.prepareStatement(sql); ResultSet rs = ps.executeQuery(); while(rs.next()) { Blob b=rs.getBlob(2); byte barr[]=b.getBytes(1,(int)b.length()); byteStr = new String(barr); } }catch(Exception e){ e.printStackTrace(); } return byteStr; }
Servlet Code
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub System.out.println("inside get"); JSONObject result= new JSONObject(); Retreive rt = new Retreive(); result.put("image", rt.getImage()); response.setContentType("application/json"); PrintWriter out = response.getWriter(); out.write(result.toString()); out.flush(); out.close(); }