Question

我在数据库中有一张图片。我想要检索图像并使用角度js在网页中显示它。获取数据后，我有字节数组。如何将数据发送到html页面。我遇到以下代码的问题..请帮助。
当我点击链接查看图片时，页面向服务器发送2个获取请求而不是一个。它连续发送请求2次。

注意：我尝试使用以下链接..但它没有工作

AngularJS - Show byte array content as image

以下是我的js文件

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类文件

 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代码

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();

}

Answer 1

好像你的image不是base64编码的字符串，但仍然是那个字节数组。您需要先对其进行编码才能像<img data-ng-src="data:image/PNG;base64,{{image}}">

一样使用它

查看文档AngularJS - Show byte array content as image

您也可以尝试这种方法https://gist.github.com/jonleighton/958841

将字节数组显示为角度js中的图像

1 个答案: