• Post Reply Bookmark Topic Watch Topic
  • New Topic

Display BLOB Image in JavaScript recovered from Ajax  RSS feed

 
Fernando Skackauskas
Ranch Hand
Posts: 69
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello Guys,

I have the following problem:

I have an image recorded in MySQL BLOB field

I use an AJAX program to retrieve this image inside a JavaScript program.

But I do not know how display this image recovered in the JavaScript.

Does anyone have any examples of JavaScript?

Thank you,

Fernando
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66260
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why are you using Ajax to retrieve an image? Just use an img tag and set the src url to a servlet that returns the image data ( and appropriate headers).
 
Fernando Skackauskas
Ranch Hand
Posts: 69
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using AJAX because the image is recorded in a database Mysql. A Blob filed.

So, I am retrieving the image from MySQL - a Blob field. Then, when I receive the image in my website, I do not know how show the image using JavaScript.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66260
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Fernando Skackauskas wrote:I am using AJAX because the image is recorded in a database Mysql. A Blob filed.

That makes no sense. That's like saying "I'm using a coffee cup to cut my food". Ajax is not suitable for image data.

Use the right tool for the job.



So, I am retrieving the image from MySQL - a Blob field. Then, when I receive the image in my website, I do not know how show the image using JavaScript.

I already told you -- you change the src attribute.

The code you are using to retrieve the image data from the DB needs to be changed to return it as the response of a servlet (or whatever you are using), and with the correct content headers set. Then use the URL of that servlet (or whatever you are using) as the src of the image. (You may need to add a random request parameter to make the browser recognize that the src URL has changed if there are no other differences.)
 
Thad Humphries
Greenhorn
Posts: 26
Google Web Toolkit Java Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Presuming your AJAX call returns the images in Base64, you can use a data URL: https://en.wikipedia.org/wiki/Data_URI_scheme#HTML

Alternately, instead of using AJAX, you write a server-side function that returns image/png, image/jpeg, etc. and assign that function's URL to your <image> src attribute.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66260
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thad Humphries wrote:you write a server-side function that returns image/png, image/jpeg, etc. and assign that function's URL to your <image> src attribute.

This is the recommended approach.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!