使用 Flask 和 AJAX 操作显示图像答案

【问题标题】：Displaying Image as a result of operations with Flask and AJAX使用 Flask 和 AJAX 操作显示图像
【发布时间】：2020-06-26 14:58:36
【问题描述】：

我目前正在开展一个项目，其中一个可解释的用于 CNN 图像识别的 AI 库 (https://github.com/albermax/innvestigate) 旨在在 Web 服务中实现。现在，我找到了一个好看的模板，它涉及基于 Flask (https://github.com/OkanKY/keras-flask-webapp) 的通用图像识别后端和前端。

我设法实现了该库，但没有设法在 Web 服务上显示生成的绘图图像。这是我尝试过的：

Python/Flask 代码：

@app.route('/predictResNet50', methods=['GET', 'POST'])
def predictResNet50():
    if request.method == 'POST':
        file_path = get_file_path_and_save(request)

        ...

        plt.savefig(file_path[:-4] + explainer + "Plot.jpg")
        fullPlotFilename = file_path[:-4] + explainer + "Plot.jpg"
       
        ...

        return fullPlotFilename

这样，绘图图像完美地存储在静态/图像库中。调用 API 的相应 JavaScript 代码如下所示：


$.ajax({
            type: 'POST',
            url: '/predictResNet50',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                // Get and display the result
                $('.loaderResNet50').hide();
              //  $('#resultResNet50').fadeIn(600);
              //  $('#resultResNet50').text(' Result:  ' + data1);
                $('#plotResNet50').show();
                $('#plotResNet50').html('<img src="' + data + '">');
                console.log('ResNet50 Success!');
            },
        });

在修改之前，显示了预测的结果（注释掉的部分）。现在，应该显示绘图图像。理想情况下，结果加上预测将是目标，但就目前而言，情节就足够了。但这由于某种原因不起作用。 JS中的API调用返回正确的值，但只显示图片地址，不显示实际图片。

HTML 脚本：

<div id="plotResNet50">
</div>

谁能告诉我，我错过了什么？由于我对 JQuery 不太熟悉，因此将不胜感激！

如果所述信息不充分，可以提供指向当前 GitLab 存储库的链接。

【问题讨论】：

标签： javascript html jquery ajax flask

【解决方案1】：

如果您打算使用 JQuery 将元素添加到 HTML，则函数 html() 不适合使用。

改为使用：

$('#plotResNet50').prepend('<img src="' + data + '">')

【讨论】：