如何在 Django 中使用图像更新 div？

Posted 2023-02-24

【中文标题】如何在 Django 中使用图像更新 div？

【英文标题】：How to update a div with an image in Django?

【发布时间】：2011-01-13 19:48:06

【问题描述】：

以下是生成散点图作为响应的 matplotlib 代码。

def plot(request):
    r = mlab.csv2rec('data.csv')
    fig = Figure(figsize=(6,6))          
    canvas = FigureCanvas(fig)
    ax = fig.add_subplot(111)
    ax.grid(True,linestyle='-',color='gray')
    ax.scatter(r.x,r.y);       
    response=django.http.HttpResponse(content_type='image/png')
    canvas.print_png(response)
    return response

我想使用 jquery ajax 更新模板中的 div 标签。以下是监听表单 sumbit 按钮并在成功时更新 div 的 jquery 代码。

<script type="text/javascript" charset="utf-8">
    $(function()  
        $('#plot').submit(function() 
          jQuery.ajax(            
            url: this.action,
            timeout: 2000,
            aysnc: true,
            error: function() 
              console.log("Failed to submit");
            ,
            success: function(r)  
              $('#plotarea').html(r);
              
          ) 
            return false;
          )
     )
</script>

但是当我点击提交按钮时，垃圾字符会显示在 div 而不是图像上。

任何人都可以指导我如何显示响应中的图像吗？

提前致谢。

【参考方案1】：

它失败了，因为plot() 输出原始图像数据（带有标题），并且您将其直接分配给 div 的内容区域 (.html())。当 url 直接返回图像数据时，它应该被用作 <img> 标签的 src 属性。

如果您不想重新设计您的工作流程，您可以尝试使用 base64 编码字符串并使用此方法：http://www.websiteoptimization.com/speed/tweak/inline-images/

即类似$('#image').attr('src', 'data:image/png;base64,' + r); 在您的成功电话中。

【讨论】：

我试过了。但是我得到了带有 div 的垃圾字符，我只能从 Firebug 中看到它。