使用AJAX显示php生成的图像

Question

我有一个随机生成图像的PHP脚本.像这样的东西:

<?php
$image = imagecreatetruecolor(400,200);

// process image

// rendering image
header("Content-type: image/jpeg");
imagejpeg($image);
?>

我的HTML看起来像这样:

<img id="image" src="/models/plugins/image.php"/>
<button id="button">Get new image</button></body>

然后我有一个jquery文件处理单击按钮,以便在单击按钮时加载新的随机图像:

$(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'models/plugins/image.php',
            success: function(data){
                $('#image').html('<img src="' + data + '">')
            }
        })
    })
})

我使用firebug,我可以看到实际发送了请求并且响应成功接收,但图像没有改变.

我做错了什么,我该如何解决这个问题？

Answer 1

我添加了另一个答案,因为我认为之前的答案都没有解决问题.我认为,OP唯一需要的是在点击按钮时更新(!)图像.因此不需要Ajax请求,只需重新加载图像即可.您可以通过将随机查询字符串附加到图像的src属性来强制执行该操作.

$('#button').click(function() {
    var $image = $('#image');
    var plainSrc = $image.attr('src').split("?")[0];  // disregard previous query string
    $image.attr('src', plainSrc + "?" + (new Date().getTime()));
});