Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-11-15
6
Medium Priority
?
461 Views
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.
0
Comment
Question by:ZoniacUser
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 1500 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?
0
 

Author Comment

by:ZoniacUser
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.
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 1500 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.
0
Implementing Azure Infrastructure Exam 70-533

This course is designed to familiarize and instruct students in the content that is covered by Microsoft Exam 70-533, Implementing Microsoft Azure Solutions. It focuses on all the November 2016 objective domain topics.

 

Author Comment

by:ZoniacUser
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.
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 1500 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: http://mydomain.com/getprofileimage/{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.
0
 

Author Comment

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

No Need
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Viewers learn about the “for” loop and how it works in Java. By comparing it to the while loop learned before, viewers can make the transition easily. You will learn about the formatting of the for loop as we write a program that prints even numbers…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Suggested Courses

704 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