如何在Flask项目的index文件中展示下载的图片？

问题分析 #

你的代码存在以下几个核心问题导致图片无法正常展示：

1. Flask默认仅从static目录加载静态资源，当前图片存放路径不在Flask的静态资源查找范围内
2. pygoogle_image的默认下载路径不符合Flask静态资源规范，且URL拼接逻辑错误
3. 未提前创建目标存储目录，可能导致图片下载失败

修正步骤 #

1. 调整静态资源目录结构 #

Flask默认读取static文件夹下的静态资源，先在项目根目录创建static/images文件夹，确保目录存在（若不存在，后续代码会自动创建）。

2. 修改Flask代码，指定下载路径并修正URL拼接 #

替换为以下代码：

from flask import Flask, render_template, request
from pygoogle_image import image as pi
import os

app = Flask(__name__)

# 定义静态图片存储的根路径
IMAGE_ROOT = os.path.join(app.static_folder, 'images')

@app.route('/', methods=["POST", "GET"])
def index():
    image_urls = []
    if request.method == "POST":
        prompts = request.form['prompt']
        print(prompts)
        try:
            # 为当前关键词创建专属目录，避免不同关键词的图片混放
            target_dir = os.path.join(IMAGE_ROOT, prompts)
            os.makedirs(target_dir, exist_ok=True)
            
            # 指定pygoogle_image的下载目录为static/images下的关键词子目录
            image_paths = pi.download(
                keywords=prompts,
                limit=4,
                directory=target_dir
            )
            print(image_paths)
            
            if image_paths:
                # 拼接符合Flask规范的静态资源URL
                image_urls = [
                    f"/static/images/{prompts}/{os.path.basename(img_path)}"
                    for img_path in image_paths
                ]
                print(image_urls)
        except Exception as e:
            return f"An error occurred: {str(e)}"
        print("Image URLs:", image_urls)
    return render_template('index.html', image_urls=image_urls)

if __name__ == '__main__':
    app.run(debug=True)

3. 修正index.html的图片渲染逻辑 #

确保HTML正确遍历image_urls并渲染图片，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>图片搜索展示</title>
</head>
<body>
    <form method="POST">
        <input type="text" name="prompt" placeholder="输入图片关键词" required>
        <input type="text" name="username" placeholder="用户名">
        <input type="text" name="phone" placeholder="手机号">
        <button type="submit">搜索并下载图片</button>
    </form>

    <div style="margin-top: 20px;">
        {% for img_url in image_urls %}
            <img src="{{ img_url }}" alt="搜索结果图片" style="width: 200px; height: auto; margin: 10px;">
        {% endfor %}
    </div>
</body>
</html>

4. 验证关键点 #

• 检查下载后的图片是否出现在static/images/你的关键词目录下
• 查看控制台输出的image_urls是否为类似/static/images/cat/cat0.jpg的格式
• 在浏览器直接访问图片URL（如http://localhost:5000/static/images/cat/cat0.jpg），确认能正常打开

内容的提问来源于stack exchange，提问作者Sarvesh Gupta