Wie Bilder auf Webseiten mit angularjs angezeigt werden?

Question

ich schon wissen, wie Bilder in mongodb speichern AngularJS und java es in meinem mongodb zu retten,

Ich brauche das gespeicherte Bild von mongodb zu bekommen und es in einer HTML-Seite mit AngularJS anzuzeigen.

Dies ist mein Controller für Bild bekommen

@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; 
} 

Das ist mein AngularJS ist für immer

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) { 
}); 

Das ist mein html ist Bild für die Anzeige

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

wenn ich einfach gesagt Der Link zum Browser Ich habe diese Ausgabe in octect-Stream

PNG .....

Wie Bild in HTML anzuzeigen? Irgendein Fehler in meinem Code weise?

Image for getting output

Answer 1

Ich denke, Ihr base64-Code nicht richtig Bilder konvertiert, so meinen Code überprüfen kann Ihnen helfen.

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

senden Sie diese Variable img an Ihren angularjs-Code.