Use AJAX to display php generated image - php

Question

I have a php script that randomly generates an image. Something like this:
<?php
$image = imagecreatetruecolor(400,200);
// process image
// rendering image
header("Content-type: image/jpeg");
imagejpeg($image);
?>
My html looks like this:
<img id="image" src="/models/plugins/image.php"/>
<button id="button">Get new image</button></body>
Then I have a jquery file that handles the click to the button, so that a new random image is loaded when the button is clicked:
$(function(){
$('#button').click(function(){
$.ajax({
url: 'models/plugins/image.php',
success: function(data){
$('#image').html('<img src="' + data + '">')
}
})
})
})
I use firebug, I can see that request is actually sent and that the response is received successfully, but the image does not change.
What am I doing wrong and how can I fix this?

Answer 1

I added another answer because I think that none of the previous answers solved the problem. I think, the only thing the OP wanted was to update(!) the image when the button is clicked. So there is no need for an Ajax request, just reload the image. And you can enforce that by appending a random query string to the image's src attribute.
$('#button').click(function() {
var $image = $('#image');
var plainSrc = $image.attr('src').split("?")[0]; // disregard previous query string
$image.attr('src', plainSrc + "?" + (new Date().getTime()));
});

Answer 2

The src attribute of an image tag actually expects an URL not actual JPEG data.
Try this:
$(function(){
$('#button').click(function(){
$('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000) );
});
});

Answer 3

To use the image inside the src attribute you need to provide a valid URI, for example a data-URI:
<?php
$image = imagecreatetruecolor(400,200);
// process image
// create image URI
ob_start();
imagejpeg($image);
echo "data:image/jpeg;base64,", base64_encode(ob_get_clean());
?>
I once compiled a more detailed answer for a similar question.

Answer 4

The resulting image has to be base64 encoded to be included like that.
So you need to do the following:
Edit the image
Get resulting image in data string.
To get image string, you either store it to filesystem and read it through file_get_contents() (useful for cache) or use imagejpeg() without location, which places the image in output buffer. To get the value from output buffer use ob_start() and ob_get_contents().
Convert data string of the image to base64 (using base64_encode())
Return this string to browser
Set image "src" field to "data:image/png;base64,[BASE64]" where [BASE64] is the string returned from PHP.

Answer 5

The image you are calling is being cached by browser, use a query string at the end of your image url to let the browser thing its a new image and it should not use cached version.
Something like this:
$(function(){
$('#button').click(function(){
$.ajax({
url: 'models/plugins/image.php?t='+((new Date).getTime()),
success: function(data){
$('#image').html('<img src="' + data + '">')
}
})
})
})

Answer 6

Instead of $('#image').html('<img src="' + data + '">'), try $('#image').attr('src', data);