• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Devaka Cooray
  • Tim Cooke
Sheriffs:
  • Rob Spoor
  • Liutauras Vilda
  • paul wheaton
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Mikalai Zaikin
  • Carey Brown
  • Piet Souris
Bartenders:
  • Stephan van Hulst

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

 
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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":"adamgilichrist@gmail.com","userImage":"W0JANjM3NjU1MzM="}



and this is My JavaScript function



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
responsePage.PNG
[Thumbnail for responsePage.PNG]
 
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
something like this I have try so far



but its not working

I am using SpringController to generate this web services
@RestController
 
Bear Bibeault
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
whippersnapper
Posts: 1843
5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Would scale affect your recommendation, Bear?

Say 100 images versus 100,000?
 
Bear Bibeault
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Marshal
Posts: 4613
578
VSCode Eclipse IDE TypeScript Redhat MicroProfile Quarkus Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
@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

imagserrro.PNG
[Thumbnail for imagserrro.PNG]
 
Kishor Joshi
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
this post on SO gives me some Hint how can I display Image

this is my code in JSP page



and this is GET method code of /ImageDemo


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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Standing up a JBoss server just to serve static content is a bit of overkill.
 
Kishor Joshi
Ranch Hand
Posts: 674
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


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




can you clear it a little bit?
 
Bear Bibeault
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Do not meddle in the affairs of dragons - for you are crunchy and good with ketchup. Crunchy tiny ad:
Smokeless wood heat with a rocket mass heater
https://woodheat.net
reply
    Bookmark Topic Watch Topic
  • New Topic