Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 502
  • Last Modified:

How to show a base 64 encoded string in image tag in internet explorer

In our Grails project,an image tag is like this

<img id="Image" name="Image" src="${createLink(controller: 'controllerName', action:'actionName')}">

Open in new window

The defaule image  gets loaded on page load. Later when the user uploads new image, we use
base64 conversion to show the new image,by getting encoded byte array from the controller action.

$('#Image').attr("src", 'data:image/'+extention+';base64,' + imageContent);

Open in new window

This works fine all other browsers except internet explorer.
  • 3
  • 3
3 Solutions
Alexandre SimõesManager / Technology SpecialistCommented:
This is only supported on IE8+
Which one are you using?

On top of that there are a full list of troubles related to it:
Different browsers support different image sizes (IE8 supports only up to 32kb)
Base64 encoding actually increases the image size...
You won't be caching this image client side

Why don't you return an image url from the controller instead?
ZoniacUserAuthor Commented:
This is a profile image and since the image resides out of the web container, we cannot return image url.
Also  it is a grails application running on jetty server.We dont know where to set the context path for the image.
Alexandre SimõesManager / Technology SpecialistCommented:
I know nothing about Grails but I'm sure you should be able to get the image, save it to a temp folder within the website and return its relative path.
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

ZoniacUserAuthor Commented:
This is a profile image. If the number of users increase, then the number of profile pictures will also increase as well. As we are using amazon server for running our application, we cannot use more images inside the web container as it may create memory problem.
Alexandre SimõesManager / Technology SpecialistCommented:
Well, I think you have a problem right now that should be solver by not use the base64 image encode.

I don't see how storing the images in the Amazon server can create memory issues.
These images should have a size measured in 2 digit kb, max.
It will consume storage on your cloud server but it's a small price to pay...

Otherwise what you can do is create a controller method that renders the image.
Basically you would call:{userid} and it returns the image.
This way the browser will still be able to cache the image and you don't need to store it physically in the server.
ZoniacUserAuthor Commented:
I've requested that this question be deleted for the following reason:

No Need
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now