AI生成图像后无法在Flask网页渲染的问题求助

核心问题梳理 #

图像已成功保存到static目录但无法渲染，主要问题出在前端AJAX处理逻辑、模板数据未利用、浏览器缓存三个环节，具体错误点如下：

1. AJAX请求未处理后端返回结果 #

前端通过AJAX提交请求，但success回调仅弹出提示，未更新页面内容。后端返回了渲染后的模板，但前端未接收并替换页面区域，导致页面不会自动刷新显示新图像。同时，表单onsubmit属性和JS里的提交事件绑定存在重复绑定问题，多次点击会触发多轮AJAX请求，逻辑冗余混乱。

2. 模板未利用传递的img_data值 #

后端disp_image函数生成了图像的Base64编码img_data并传递给模板，但HTML里的<img>标签依旧使用静态文件路径，完全没用到Base64数据。且浏览器会缓存静态文件，即使文件已更新，仍会显示旧图像。

3. 表单冗余属性干扰逻辑 #

表单设置了target="_blank"，但AJAX已经阻止了表单默认提交行为，该属性完全无效，反而增加逻辑混乱。

修复步骤 #

前端代码修改 #

HTML模板调整

<body>
    <h1>Turn your words into art!</h1>
    <p>Enter a description of the image you want to generate.</p>
    <!-- 移除冗余的target和onsubmit属性 -->
    <form id="text-form" action="/my_prompt" method="post">
        <label for="text-input">Text Prompt:</label>
        <textarea id="text-input" name="text" rows="5" placeholder="e.g. A cat riding a bicycle on Mars"></textarea>
        <button type="submit">Generate Image</button>
    </form>
    <div id="image-container">
        {% if img_data %}
        <h1>Your generated image:</h1>
        <!-- 使用Base64数据作为图片源，彻底避免缓存问题 -->
        <img id="picture" style="height: 300px;" src="data:image/png;base64,{{ img_data }}">
        {% else %}
        <h1>Image will render here...</h1>
        {% endif %}
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    
    <script type="text/javascript">
        // DOM加载完成后仅绑定一次提交事件，避免重复触发
        $(function() {
            $('#text-form').on('submit', function (e) {
                e.preventDefault();
                console.log('submit triggered');
                $.ajax({
                    type: 'POST',
                    url: '/my_prompt',
                    data: {
                        text: $("#text-input").val()
                    },
                    // 接收后端返回的HTML，替换当前页面的图像容器
                    success: function (response) {
                        var newImageContent = $(response).find('#image-container').html();
                        $('#image-container').html(newImageContent);
                    }
                });
            });
        });
    </script>
</body>

后端代码优化 #

Python代码调整

def disp_image():
    if os.path.exists(output_file):
        im = Image.open("static/my-output.png")
        data = io.BytesIO()
        im.save(data, "PNG")
        encoded_img_data = base64.b64encode(data.getvalue())
        img_data = encoded_img_data.decode('utf-8')
        return render_template("myindex.html", img_data=img_data)
    # 无图像时返回默认模板
    return render_template("myindex.html", img_data=None)

@app.route('/my_prompt', methods = ['POST'])
@cross_origin()
def imggen():
    print("inside gen")
    if request.method == 'POST':
        prompt = request.form.get("text")
        logger.info('%s This is the prompt: ', prompt)
        print(prompt)
        print("after prompt")
        model = ImageGenerationModel.from_pretrained("imagegeneration@006")
        images = model.generate_images(
            prompt=prompt,
            number_of_images=1,
            language="en",
            aspect_ratio="1:1",
            safety_filter_level="block_some",
            person_generation="allow_adult",
        )
        images[0].save(location=output_file, include_generation_parameters=False)
        print(f"Created output image using {len(images[0]._image_bytes)} bytes")
        # 直接返回渲染后的模板，供前端替换页面内容
        return disp_image()
    else:
        print("error")
        return disp_image()

额外优化建议 #

• AJAX请求过程中可添加加载提示（如显示"生成中..."），提升用户体验。
• 若需保留静态文件，可在url_for中添加时间戳参数（如{{url_for('static',filename='my-output.png', v=time.time())}}），强制浏览器刷新缓存。
• 清理冗余代码：删除后端中注释掉的redirect代码等无效内容。

内容的提问来源于stack exchange，提问作者Christopher Opitz