如何显示从Java到JSP的图像文件对象？

Question

I have a method which returns a file object of an image:

public File getPhoto(entryId){...}

I call this method from my action method and set the file to a DTO File variable:

    myDto.photo = getPhoto(entryId); 
       // where entryId refers to the name of the image file 
       // e.g. ent01 for ent01.gif, ent02 for ent02.gif and so on.

Now, in my JSP file I would like to display the image through a code like this:

<img src = "${myDto.photo}"> 

However,I realized that the myDto.photo is a file object thus has the absolute path of the file and not the URL needed for the img src in JSP.

Through searching, I understand that I can use a servlet and use something like

<img src = "${pageContext.request.contextPath}/image/ent01.gif"}. 

However, I'm a little confused about this one as I wanted the filename part (ent01.gif) to vary based from the input entryId.

I hope anyone can shed light for me on this one. A lot of thanks.

Answer 1

You can Create a Controller Class for you to diplay the image you want.

@Controller
public class ImageReadFile{

    // this is for mapping your image related path. 
    @RequestMapping(value="/image/*")
    public void readImage(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        ServletContext sc = request.getServletContext();

        //here i uploaded my image in this path
        // You can set any path here
        String imagePath = "/home/somefolder/Workspaces/Images/";
        String [] fragmentFilename = request.getServletPath().split("/");

        //Check if image isn't set
        if(fragmentFilename.length <= 2){
            return;
        }

        String filename = fragmentFilename[2];
        String requestedImage = "/"+filename;

        if(filename == null){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        File image = new File(imagePath, URLDecoder.decode(requestedImage, "UTF-8"));

        if(!image.exists()){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        String contentType = sc.getMimeType(image.getName());
        response.reset();
        response.setContentType(contentType);
        response.setHeader("Content-Length", String.valueOf(image.length()));
        Files.copy(image.toPath(), response.getOutputStream());
    }

}

Servlet Version.

try this.

@WebServlet("/image/*")
public class ImageWriter extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        ServletContext sc = request.getServletContext();

        //here i uploaded my image in this path
        // You can set any path here
        String imagePath = "/home/somefolder/Workspaces/Images/";
        String [] fragmentFilename = request.getServletPath().split("/");

        //Check if image isn't set
        if(fragmentFilename.length <= 2){
            return;
        }

        String filename = fragmentFilename[2];
        String requestedImage = "/"+filename;

        if(filename == null){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        File image = new File(imagePath, URLDecoder.decode(requestedImage, "UTF-8"));

        if(!image.exists()){
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        String contentType = sc.getMimeType(image.getName());
        response.reset();
        response.setContentType(contentType);
        response.setHeader("Content-Length", String.valueOf(image.length()));
        Files.copy(image.toPath(), response.getOutputStream());

    }

}

this is how you gonna set display it in jsp,

<img alt="${imageFilename}" src="${pageContext.request.contextPath}/image/${imageFilename}">

Just pass the Filename to jsp then let the controller read it and display it.

hope this will help you.