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

Posted on 2013-11-15
Last Modified: 2013-12-03
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.
Question by:ZoniacUser
  • 3
  • 3
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 500 total points
ID: 39650590
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?

Author Comment

ID: 39650788
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.
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 500 total points
ID: 39650840
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.
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.


Author Comment

ID: 39650886
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.
LVL 30

Accepted Solution

Alexandre Simões earned 500 total points
ID: 39650958
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.

Author Comment

ID: 39692151
I've requested that this question be deleted for the following reason:

No Need

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Angular - code works but need to make a change 14 30
spring jars download 1 26
Jquery 10 19
Older JQuery functionality is not in the newer JQuery 1.4.4 versions, 6 21
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different d…
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now