How to load an Image from a JSON response to an Input <img> element?

[Kishor Joshi]

Hi there

I am calling a JSON and extracting data from that JSON and setting in the HTML element.All Inputs are working fine except an Image is not loading in my case

this is my JSON response

{"userName":"AdamGilichrist","userMob":"8789878908","userCategory":"HR","userDept":"null","userSubDept":"null","userEmail":"[email protected]","userImage":"W0JANjM3NjU1MzM="}

and this is My JavaScript function

<script type="text/javascript">
function myProfile(){
		
		$.get("/CollegeManagementSystem/myprofileget",
				{
			       
				}
				
		).error(
		).success(
				function(data)
				{
					$("#userName").text(data.userName);
					$("#userMob").text(data.userMob);
					$("#userEmail").text(data.userEmail);
					$("#userCategory").text(data.userCategory);
					$("#userDept").text(data.userDept);
					$("#userSubDept").text(data.userSubDept);
					$("#userImage").attr('src','data.userImage');
					
				}
		 );
	}
window.onload=myProfile();
</script>

and this is My HTML page

<div id="left_block" style="float: left;">
Name:<label id="userName">Name is Here</label><br>
Mob:<label id="userMob">Mobile Number is Here</label><br>
Email:<label id="userEmail">Email is Here</label><br>
Category:<label id="userCategory">Ctegory is Here</label><br>
Dept:<label id="userDept">Department is Here</label><br>
Sub Dept:<label id="userSubDept">Sub Dept is Here</label>
</div>

<div id="right_block" style="float: right;">
<img src="#" alt="Image is Here" width="20%" id="userImage"></img>
</div>

all the fields are setting fine but Image is not working

I am also using JQuery for this task.

How to do this?

Thanks

[Bear Bibeault]

userImage doesn't look like a URL to an image, which is how you are treating it. It looks like a Base64 string or something. Why isn't it a URL to the image?

[Kishor Joshi]

something like this I have try so far

<script type="text/javascript">
function myProfile(){
		
		$.get("/CollegeManagementSystem/myprofileget",
				{
			       
				}
				
		).error(
		).success(
				function(data)
				{
					$("#userName").text(data.userName);
					$("#userMob").text(data.userMob);
					$("#userEmail").text(data.userEmail);
					$("#userCategory").text(data.userCategory);
					$("#userDept").text(data.userDept);
					$("#userSubDept").text(data.userSubDept);
				    document.getElementById("userImage").src = "data:image/jpeg;base64," + data.userImage;
					
				}
		 );
	}
window.onload=myProfile();
</script>

but its not working

I am using SpringController to generate this web services
@RestController

[Bear Bibeault]

OK, so you are trying to use the data protocol for the images (generally not a good idea as the images cannot cache). I've never done that, so you'll need to be more specific about what "not working" means.

[Kishor Joshi]

I have set a Image on my database as JPEG

How can I get that Image in my JSP page via web Service(REST JSON)

what is best approach for this?

[Bear Bibeault]

Why is the image data in the database? Do you have a good reason for doing so? The down-sides are that the DB must be queried every time that image is to be fetched, and that (as mentioned), the image data cannot be cached. What's the up-side that makes you want to use this approach?

In any case, as I said, it's not something I've ever done so without more info as to how it isn't working, not sure I can say why it isn't working.

[Bear Bibeault]

P.S. What is the nature of the image? If I were to store an image in the database for some reason (and I've never had a reason to do so), I'd see if it were possible to store an SVG rather than binary image data. But whether that's possible depends upon the nature of the image -- for example, if it were a flat icon, SVG is a good choice; for photos, not so much.

[Kishor Joshi]

this is my approach I have a web application In which I am asking user to enter His/Her Profile

Profile contain(UserName,UerDOB,UserEmail ,UserImage and others)

So I am saving all these data in mysql db(So far)

I am saving UserImage as BLOB in mysql database

Image format is JPEG or PNG only

What will be your approach If you have to save all these UserInformations(UserImage and other data)

[Bear Bibeault]

I'd store the image in a separate app that's using Apache to serve static content and store the URL in the DB.

But your approach can work -- it's just not something I've ever wanted to do.

[Kishor Joshi]

You are right

I have also seen so many web services online which also provide URL in rest web services sample

I think I am going wrong

Right Now I am testing this application on localhost can I still use that apache service you are suggesting?

What is name of that apache service?

[Bear Bibeault]

The Apache Web Server (frequently just called "Apache") is very popular for serving static content and PHP applications. There's no sense setting up a Java web server just to serve static content.

If you have a Mac, Apache Web Server is already installed (but needs to be configured). If not, then you can find instructions on the web.

[Michael Matola]

Would scale affect your recommendation, Bear?

Say 100 images versus 100,000?

[Bear Bibeault]

I don't think so. The images need to go somewhere, and in the Java web app is certainly not the place. Another option I've considered is putting them into an Amazon web service, but haven't pursued that.

But again, a lot of it depends upon the nature and use of the images. For the case of profile photos that are uploaded, I'd most likely go with the Apache/AWS approach.

[Kishor Joshi]

What other resource I need to externalize from database?

let me explain my web application(CollegeManagementSystem) architecture

1)Their is a Lot of Profile Images
2)Some Videos in latest Section or Latest News.
3)A lot of Users(Students) Records of data their past years fees and library Info
4)Their is also a section of discussion forums where user can discuss their problems with each other can post Images and their forums

[Kishor Joshi]

But Coming back to my original topic I think its just a storage choice (between mysql or apache Web Server)

But suppose my Image size is not more than 10Kb then How can I display that Image(from mysql db) in my <img> tag in JSP page?

I have shared my all code with you

[Ron McLeod]

I had a similar situation, but in my case the images were stored in an LDAP directory.

Have your web service provide a URL for the image, where the URL points to a servlet which reads the binary image from your data source and writes it out the output stream returned by ServletResponse.getOutputStream(). Set the content type for the response to the appropriate MIME type such has image/jpeg.

[Kishor Joshi]

@Ron

After following @Bear direction I am storing my Images inside from my local hard disk and I have configured its path with Apache web server
by reading "sbamca" answar on this post in SO

Everything is working fine when I opened my ManagerApp in apache and try to launch Index.html file its working fine but when I try to access the Images as suggested by "sbamca" in his answar

I am getting errors

see atttachments

first I am trying to access it from URL

[Kishor Joshi]

this post on SO gives me some Hint how can I display Image

this is my code in JSP page

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/ImageDisplayDemo/js/jquery.js"></script>
<title>Insert title here</title>
</head>
<body>
UserName<label id="userName"></label><br>
UserCity<label id="userCity"></label><br>
UserImage<img src="/ImageDisplayDemo/ImageDemo?userName=kishor" id="userImage" alt="Image is Here" width="20%"/>
</body>
</html>

and this is GET method code of /ImageDemo

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		PrintWriter out=response.getWriter();
		try {
			createConnection();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		String query="select userImage from imagedisplay where userName='Kishor'";
		
		try {
			stmt=conn.createStatement();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		try {
			rs=stmt.executeQuery(query);
			
			if(rs.next()){
				byte[] imageBytes=rs.getBytes(1);
				response.setContentType("text/plain");
				response.setContentLength(imageBytes.length);
				out.println(imageBytes);
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}

I am getting a Strings in my output windows when I directly call /ImageDemo

But Problem is not yet solved
(Although I have changed code but this is JUST for Illustartion I am stick with my original code)

[Kishor Joshi]

my problem has been solved by following this post of SO answar given by "sbabamca"

I have some syntax error before

Now thanks to @Bear for guiding me in right direction

this is concluded answar

1)Store Image URL in database not its Binary or Blob Format (Hard to retrieve over rest clients) if you are working on localhost configure a directory on your Harddisk with apache follow abaove post
If you are working on live web server use AWS or Apache web server

2)Send URL of Images to REST Client(Android,C#,or others)(In my case AJAX client).

3)Change the ImageDisplay Element Src attriibute to path received from REST(In my case <img> src but it will be same for any ImageDisplay tag that will be receive remotely URL like web service)


Happy Coding

@Bear (Correct me If I need to explain more for future reader of this thread)

[Kishor Joshi]

Now one more question

I have planned to deploy this web application finally on Openshift

I am using JBoss now for deployments is it not possible that I can add all those Images inside the JBoss Server

I can do that using Apache Server can I do that using JBoss also?

[Bear Bibeault]

Standing up a JBoss server just to serve static content is a bit of overkill.

[Kishor Joshi]

Standing up a JBoss server just to serve static content is a bit of overkill.

can you clear it a little bit?

[Bear Bibeault]

Serving static content is easy and even Apache ia a bit overkill and can do much more than just that. Application servers such as JBoss take up lots of resources that are not necessary just to serve static content.

In fact, if I knew a little more about Node.JS, I'd likely write my own mini-server just to serve up the static resources. That's high on my "learn to do" list.