• 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
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Display BLOB Image in JavaScript recovered from Ajax

 
Ranch Hand
Posts: 78
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Sheriff
Posts: 67746
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 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: 78
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.)
 
Greenhorn
Posts: 27
Google Web Toolkit Tomcat Server Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
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

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.
 
I'm not dead! I feel happy! I'd like to go for a walk! I'll even read a tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic