Jump to content

base64 encode image blob not showing in IE


Recommended Posts

echo '<img src="data:image/jpg/png/jpeg;base64,' . base64_encode( $row['image'] ) . '" height="150" />';

This is showing up images great in firefox, safari and chrome, but in internet explorer it shows a nice red cross, and I assume it is because of the encoding?


Does anyone know how to get working in internet explorer as well?


Pretty urgent job!


Much appreciated for your help!

Link to comment
Share on other sites

Since it prevents the browser from caching the images, you should not be outputting images on a web page this way. It also results in a huge amount of data which slows down the sending and loading of the web page (base64 encoding is always larger than the raw image data.) Do you have a specific reason for trying to output the image this way?

Link to comment
Share on other sites

To dynamically output images from php, you normally use a separate .php script to output the actual image data. You would put the URL of this separate .php script into the src="URL_of_script_that_outputs_an_image" attribute. The main page would just form the correct URL and put it into the src="..." attribute. The query in the main page would not SELECT the raw image data, but would instead select the ID of the image. You would typically put a GET parameter on the end of the URL to specify the id of the image (so that you can use the same .php script for any dynamically produced image.)


The <img tag would end up looking like - <img src="image.php?id=123" alt="">


This separate .php script would read the GET parameter $_GET['id'], validate it/cast it as an integer (since it is going to be put into a mysql query), form and execute a query that gets the content-type of the image (you can either store this in the database table row with the blob image data or you can use the image file extension to get the correct content type) and the raw image data. You then output a content-type header followed by the image data. You should be able to find an example showing this now that you know the general process.

Link to comment
Share on other sites

Sample code to dynamically output an image -


// file called using <img src="image.php?id=123" alt="">

$id = isset($_GET['id']) ? intval($_GET['id']) : false ; // get and condition id, setup default if id not supplied

// setup default type/image in case of error (no id, invalid id, no matching image, query error)
$type = 'image/jpg';
$default = 'error.jpg'; // assumes you have an error image file

if($id > 0){
// make db connection and select db

// query for the image mime type and image data
$query = "SELECT type,image FROM your_table WHERE id = $id";
$result = mysql_query($query);
	// query worked and image found
	list($type,$image) = mysql_fetch_row($result);
// output the actual image or the default/error image
header("Content-Type: $type");
echo $image;
} else {

Link to comment
Share on other sites

does not work


We cannot help you with vague statements about something that does not work. We are not standing right next to you and did not see what you saw when you tried something and contrary to popular belief, the P in HTTP does not stand for Psychic. We don't know what your code is, what your data is, what you did, what result you got, and what result you expected.


Without the code that reproduces the problem and a statement or picture of what result you got, and the actual data your code was using, we cannot help you.  :psychic:

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.