如何使用angularjs在网页中显示图像? [英] How to display images in web page using angularjs?

问题描述

我已经知道如何使用angularjs和java将图像保存在mongodb中，以将其保存在mongodb中，

I already know how to save images in mongodb using angularjs and java to save it in my mongodb,

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

I need to get the saved image from mongodb and display it in an html page using AngularJS.

这是我获取图片的控制器

This is my controller for getting image

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

这是我获取图像的angularjs

This is my angularjs for getting image

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

This is my html for displaying image

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

如果我只是将链接放置到浏览器中，我会在octect-stream中获得此输出

if I simply put the link to browser i got this output in octect-stream

PNG.....

如何在html中显示图像?我的代码中是否有错误?

How to display image in html?Any error in my code wise?

用于获取输出的图像

推荐答案

我认为您的base64代码无法正确转换图像，因此请检查我的代码可能会对您有所帮助.

i think your base64 code is not converting images properly, so check my code it may help you.

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变量发送到您的angularjs代码.

send this img variable to your angularjs code.

这篇关于如何使用angularjs在网页中显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！