Javascript 使用Flask和AJAX显示操作后的图像

我目前正在从事一个项目，其中一个用于CNN图像识别的可解释AI库（）将在web服务中实现。现在，我发现了一个好看的模板，它涉及基于Flask（）的通用图像识别后端和前端

我设法实现了这个库，但没有设法在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!');
            },
        });

$.ajax({
键入：“POST”，
url:“/predictResNet50”，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
async:true，
成功：功能（数据）{
//获取并显示结果
$（'.loaderResNet50'）.hide（）；
//$（'resultResNet50'）.fadeIn（600）；
//$（'resultResNet50'）。文本（'Result:'+data1）；
$（'#plotResNet50'）.show（）；
$（'#plotResNet50'）.html（''）；
log（'ResNet50 Success！'）；
},
});

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

HTML脚本：

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

谁能告诉我，我错过了什么？因为我对JQuery不是很有经验，所以非常感谢您的帮助

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

如果您打算使用JQuery向html添加元素，则函数

html（）

不是合适的函数

而是使用：

$（'#plotResNet50'）。如果要使用JQuery将元素添加到html中，则函数
html（）
不是合适的函数

而是使用：

$（'#plotResNet50'）。前置（''）