I am developing shopping cart in which I am storing image in database and retrieving.
When I select any product category from menu. example, I selected Computer then all list of product related to computer will be return i.e productName, Price and image, By using JSON.
this is my json response and output in comment.
custom tag code for image :
2: I think the bit you need to fix is where you SET the json data (i.e. your showProductsByCategory server side code). You haven't shown us that part of it. What value do you put into the image attribute? I'm presuming it should be the Base64 encoding of the image (like you did in the custom tag).
Are you trying to pass the image data from the database to the HTML via JSON? You could conceivably do that, but the HTML isn't going to be able to display that image data as an image, so it's pretty pointless.
The standard thing to do is to have a normal image tag in your HTML which points to a servlet which will extract the image from the database (or wherever you decide to store it) and return that data as an image. Google for "image servlet" and you should find a lot of examples of that.
posted 5 years ago
>You could conceivably do that, but the HTML isn't going to be able to display that image data as an image
I thought so too, but it appears that it IS possible: http://css-tricks.com/data-uris/ If you use a data:image url you can include the image as a base64 encoded string.
Obviously being base64 encoded, it will be larger than the original image, but it all comes back in that one stream, so saves another HTTP connection.
So if it actually sends back a base64 encoded string, it should theoretically work.
My guess as to what has gone wrong here is either
- the image data hasn't been base64 encoded
- the property for the image (data[key].image) resolves to an object rather than the image data, and further property references are required. e.g. data[key].image.base64encodedDataAttribute