如何使用 jquery 在 Django 中提供图像答案

【问题标题】：How to serve an image in Django using jquery如何使用 jquery 在 Django 中提供图像
【发布时间】：2015-07-04 12:28:23
【问题描述】：

我正在尝试使用从 Django 服务器返回的 png 图像更新我的 html 页面中的 div 元素。

在我通过单击按钮发送 ajax POST 请求的客户端脚本中，我有 -

    $('#mybtn').click(function (event) {
        event.preventDefault();
        $.ajax({
            url: "/analysis",
            type: "POST",
            data: { 'data': $("#analysis_list").val(), csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value },
            success: function (response) {
                $('#imagediv').html('<img src=' + response + ' />');
            },
        });
    });

在我的views.py中，我有-

def analysis(request):
    dataFromClient = dict(request.POST)['data'][0]
    pathToImg = testAnalytics(dataFromClient)
    img = Image.open(pathToImg)
    response = HttpResponse(content_type="image/png")
    img.save(response, "PNG")
    return response

其中testAnalytics方法根据客户端发送的数据生成要显示的图像并返回路径。 Image 是从 PIL 导入的。

我在客户端 javascript 中呈现图像时遇到问题。当我将response 分配给<img> 标记的src 属性时，我会在浏览器上看到原始图像数据而不是图像（如此处所述-How to update a div with an image in Django?）。我不确定我哪里出错了。

我也尝试过对响应进行base64编码如下（但不确定我是否正确实现）-

success: function (response) {
                $('#imagediv').html('<img alt="Embedded Image" src="data:image/png;base64,' + response + '" />');
            }

我已经参考了以下链接来了解这一点 -
Django: How to render image with a template
Serve a dynamically generated image with Django

我对网络编程和 Django 还是很陌生。有关该问题的任何见解都将非常有帮助。提前致谢。

【问题讨论】：

当你返回为base64时，你是不是这样修改了img标签？ stackoverflow.com/q/1207190/870769
是的。虽然我没有提到你提到的同一篇文章，但我尝试的与他们在那里讨论的相似。我将使用我尝试 Base64 编码的代码编辑我的问题。
如果你在服务器上使用 base64 会改变内容类型
$("#imagediv").html("<img src=" + URL.createObjectURL(response) + "/>"); ?
刚才试过了，没用。早些时候我的complete 方法也被执行（我有一个警告框，提示我的代码到达那里）；但有了这个我的代码没有到达那里。

标签： javascript jquery html django base64

【解决方案1】：

如果您想通过任何 HTML 标签的内容设置图像，您必须在图像内容之前应用 data:{type};{encode-format} 并在 CSS 中设置 background url，如下所示：

html-element{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC) repeat;
}

或者通过img标签的src属性设置：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC">

例如，如果您在www.patternify.com 站点中生成新模式，您可以从Base64 代码 字段中复制和使用base64 内容。

【讨论】：

【解决方案2】：

在发送之前尝试使用 base64 对图像进行编码。

import base64
#rest of your code 
with open("pathToImage.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

然后

success: function(response){
            $('#imagediv').html('<img src="data:image/png;base64,' + response + '" />');

【讨论】：