使用AJAX显示php生成的图像 - Use AJAX to display php generated image

我有一个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，我可以看到请求确实被发送了，响应也被成功接收了，但图像没有改变。

我做错了什么？我该如何解决？

我添加了另一个答案，因为我认为前面的答案都没有解决问题。我想，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()));
});

图像标记的src属性实际上需要一个URL，而不是实际的JPEG数据。

试试这个：

 $(function(){
      $('#button').click(function(){
          $('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000) );
      });
 });

要在src属性中使用图像，您需要提供一个有效的URI，例如数据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());
?>

我曾经为一个类似的问题整理了一个更详细的答案。

生成的图像必须经过base64编码才能像这样包含在内。

因此，您需要执行以下操作：

编辑图像
获取数据字符串中的结果图像
要获取图像字符串，您可以将其存储到文件系统并通过file_get_contents（）读取（对缓存有用），也可以使用不带位置的imagejpeg（），将图像放在输出缓冲区中。要从输出缓冲区获取值，请使用ob_start（）和ob_get_contents（）
将图像的数据字符串转换为base64（使用base64_encode（））
将此字符串返回到浏览器
将image"src"字段设置为"data:image/png；base64，[BBASE64]"，其中[BAS64]是从PHP返回的字符串

浏览器正在缓存您正在调用的图像，请在图像url的末尾使用查询字符串，让浏览器处理它的新图像，并且不应使用缓存版本。

类似这样的东西：

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

尝试$('#image').attr('src', data); 而不是$('#image').html('<img src="' + data + '">')