如何使用角度js在html页面中显示图像?

时间:2016-10-14 10:32:36

标签: html angularjs mongodb

我已经知道如何使用angularjs和java在mongodb中保存图像以将其保存在我的mongodb中,它工作正常。并获得相应的ID

我需要从mongodb获取已保存的图像,并使用AngularJS将其显示在html页面中。

这是我获取图像的控制器

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

这是我获取图像的角度

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

这是我用于显示图片的html

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

如果我只是将链接链接到浏览器即可下载图像 但是角度不合理为什么呢?

我警告它显示的数据如此

PNG \?

如何在html中显示图像?我的代码中出现任何错误?

0 个答案:

没有答案