时间戳

首页 > 解决方案 > 使用 Flask 和 AJAX 操作显示图像

javascript - 使用 Flask 和 AJAX 操作显示图像

问题描述

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

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

Python/烧瓶代码：

@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 存储库的链接。

标签： javascripthtmljqueryajaxflask

解决方案

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

而是使用：

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

推荐阅读