anglejsを使ってウェブページに画像を表示する方法は？

Question

私は既にangularjsとjavaを使用してmongodbに画像を保存する方法を知っています。

保存された画像をmongodbから取得し、AngularJSを使用してHTMLページに表示する必要があります。

これはこれはこれは私が単に置けば画像

<img id="userProfileImg" height="150px" width="150px" ng-src="data:image/png;base64,{{imageData}}"> 

を表示するための私のhtmlで画像

var userImagePromise = $http.get("../api/s3/" + $scope.user.profileImage[0].id); 
userImagePromise.success(function(data, status, headers, config) { 
    $scope.imageData = data; 
}); 
userImagePromise.error(function(data, status, headers, config) { 
}); 

を取得するための私のangularjsある画像

@GET 
@Path("/{id}") 
@Produces(MediaType.APPLICATION_OCTET_STREAM) 
public Response getById(@PathParam("id") String id) throws IOException 
{ 
    Response response = null; 
    MongoClient mongoClient = new MongoClient("localhost", 27017); 
    DB mongoDB = mongoClient.getDB("sampleDB"); 
    DBCollection collection = mongoDB.getCollection("filestore"); 
    BasicDBObject query = new BasicDBObject(); 
    ObjectId oid = new ObjectId(id); 
    query.put("_id", oid); 
    GridFS fileStore = new GridFS(mongoDB, "filestore"); 
    GridFSDBFile gridFile = fileStore.findOne(query); 
    InputStream in = gridFile.getInputStream(); 
    ByteArrayOutputStream out = new ByteArrayOutputStream(); 
    int data = in.read(); 
    while (data >= 0) 
    { 
    out.write((char) data); 
    data = in.read(); 
    } 
    out.flush(); 
    ResponseBuilder builder = Response.ok(out.toByteArray()); 
    builder.header("Content-Disposition", "attachment; filename="); 
    response = builder.build(); 
    return response; 
} 

を取得するための私のコントローラであり、ブラウザiへのリンクはoctect-streamでこの出力を得ました

PNG.....

イメージをHTMLで表示するにはどうすればよいですか？

Image for getting output

Answer 1

私はそれはあなたを助けるかもしれないあなたのbase64コードが適切に画像を変換していないと思うので、私のコードを確認してください。

import java.awt.image.BufferedImage; 
import java.io.BufferedWriter; 
import java.io.ByteArrayOutputStream; 
import javax.imageio.ImageIO; 




BufferedImage buffimage = ImageIO.read(new File(imagePath)); 
ByteArrayOutputStream baos = new ByteArrayOutputStream(); 
ImageIO.write(buffimage, "png", baos); 
String img = Base64.encode(baos.toByteArray()); 

このimg変数をanglejsコードに送信します。