How to display Image and text on JSP

[Gourav Bansal]

Hi All,

I have a User object which contain the array of byte(bytes of image) and the name. I have that object on JSP. I want to display the image and name. Can someone please help me to display both the things :(

Thanks,
Gourav Bansal

[Bear Bibeault]

JSP produces HTML. So, you figure out how to display what you want in HTML, and then figure out the JSP to make that happen.

So the first question is: how does one display an image in HTML? (Hint: it's not by using the bytes of the image.)

[Gourav Bansal]

Bear Bibeault wrote:JSP produces HTML. So, you figure out how to display what you want in HTML, and then figure out the JSP to make that happen.

So the first question is: how does one display an image in HTML? (Hint: it's not by using the bytes of the image.)

Thanks Bear for the response.

We display Image in HTML using "Img" tag and that will take the image path(src attribute). So are you pointing me to write all the Byte in a temp file and store it and use the path of temp file to display the Image.

Or is there is somthing else ?

I also tried to use the Buffered image and ImgaeIo classes but didn't get the success :(

[Ulf Dittmer]

While using a temp file would work, the usual approach would be a servlet that sends the bytes along with an appropriate content type. The URL could be something like
http://myserver.com/myWebApp/Image?type=user&userID=theUserID, where the "type" parameter indicates the kind of image you want to serve (taking into account that in the future there might be other type sof images besides user images), and "userID" is some kind of ID that uniquely identifies the user. Example code for image streaming from a servlet can be found at https://coderanch.com/how-to/java/CodeBarnSimpleStream

BufferedImage and ImageIO would not be involved.

[Gourav Bansal]

Thanks Ulf :)

I tried as you suggested
My Jsp

<#img src="download.image?imageName=${imageName}" #><#/img>

Getting the Image Name from others form. My servlet is

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("imageName");
		File file=new File("C:/Users/dell/Desktop/"+name);
		BufferedInputStream reader=new BufferedInputStream(new FileInputStream(file));
		response.setContentType("image/jpeg");
		byte[] data={};
		reader.read(data);
		OutputStream stream=response.getOutputStream();
		stream.write(data);
		stream.flush();
		stream.close();
	}

When I run the code Image is not shown. the browser shows there is some image but the content is actually not shown. Is there is something wrong with the code ??

[Ulf Dittmer]

Is the link in the HTML that gets created correct? If you copy that link manually into a browser, does the image get displayed? Does the servlet get accessed at all? Put logging into the servlet, or attach a debugger to it, to find out.

[Gourav Bansal]

I manually create the link
http://localhost:8080/FileUploadExample/download.image?imageName=imageName.jpeg

With this also the image is not displayed

[Gourav Bansal]

I tried to debug it and it seems like the

reader.read(data);

is not working. After executing this statement the data is still empty. But I checked the file it contain the proper path of the image. Didn't get where I am getting wrong while creating the stream

[Bear Bibeault]

OK, so that clearly means that the image data is not being correctly served as the response. I would use tools like HttpFox, or Chrome's builtin in network tools, to look at the request and response and see what's not correct.

[Gourav Bansal]

Thanks Bear for the response :)

I believe if I can read the data properly via BufferedStream we can set it to response and it will be available to HTML. I got the proper image name via request but reading file via FileInputStream causing problem

[Bear Bibeault]

If you cannot view the image by directly addressing it, it will not show up in an HTML page either.

[Gourav Bansal]

Sorry for the typo

here what I want to say


I believe if I can't read the data properly via BufferedStream. if we get proper data we can set it to response and it will be available to HTML.

[Maxim Karvonen]

Hi, Gourav.

        byte[] data={};  
        reader.read(data); 

You create a buffer of zero length to hold a data. Of course reader cannot put anything in that buffer (arrays are not resizeable in java). So you output an empty buffer to a client.

Also any read call may fill only part of the buffer due to a multiple reasons. And further calls to read method will read more data.

So, you need to:
1. Allocate buffer of some nonzero length (1024 * 8 bytes, for example).
2. Use a loop to read a portion of the file and then write that portion to the output stream. You should read the file until end of file is reached. And you should write only a filled portion of the buffer. Read documentation for InputStream.read to see how to treat it's return values.

[Gourav Bansal]

Thanks Maxim :)

I am able to load the Image now :)

I am one more doubt in this. As of now I am working with single machine(Server and Client). In the Request I just pass the Image Name and in servlet I am pointing my desktop file. If the same thing I perform using 2 different machine(one is client and one is server) I believe it will create problem.

what if I want to upload the file and display it on another page. In that case How I upload the image. My servlet code will run at server side and from there I don't think we can point my client machine image.

Please correct me if I am going on wrong track. Help me to understand how we can do that ??

[Bear Bibeault]

If the files are in different locations on different servers, you don't want to hard-code the file path into the code. That'd be a poor practice in any case. Rather, use a property in a properties file, or perhaps a context parameter in the deployment descriptor, to specify the file path on a machine-by-machine basis.

[Gourav Bansal]

Hi Bear,

I want to upload the file which is at my machine to the remote server. I search over the google and found that there are apache library to upload the files. I am just thinking how I can do that without using third party library. Do I need to set the all the file into request and for that should I write the java code in jsp or is there is any another way.

[Ulf Dittmer]

There's no reason not to use the file upload library - writing it yourself would just add a month of development time for no good reason. You would use that library in a servlet, not in a JSP. The online docs of the library have example code you can start with.

[Bear Bibeault]

You should never put Java code into a JSP for any reason.

If you are using a Servlet 3.0 container, it supports uploading. But otherwise, you need to use one of the 3rd-party libraries. Unless you want to write the code to parse multi-part requests yourself, and trust me, that is something you most certainly do not want to do! That's a needless wheel to re-invent, and a very complex one.

[Edit: Ulf snuck in just before me!]

[Gourav Bansal]

Thanks Bear, Ulf and Maxim for your suggestion, help and support.

I have completed my small program which is actually based using Spring Wizard Controller. In the Wizard flow My controller create a tem file and store it and while displaying information i used the Img tag which call the another servlet and read that Image and Display :rolling:

Thanks again for you help :beerchug: