Flask中Python遍历数组正常，Jinja2渲染图片URL重复问题

问题原因 #

1. Python代码逻辑错误：你在循环中每次用当前用户的头像数据覆盖e_p变量，最后传给模板的只有最后一次循环的头像数据，而非所有帖子对应的头像集合。
2. 模板渲染错误：即使拿到正确的头像数据，你直接遍历each_pic['data']并把字典ep作为图片src值，会导致路径解析错误（实际传入的是字典字符串而非URL）。

解决步骤 #

1. 修改Python代码，收集所有帖子的头像数据 #

需要将每个帖子的信息与对应的头像URL合并，形成完整的数据集传给模板：

res = supabase.table('posts').select('name').execute()
posts = res['data']
# 创建列表存储带头像的帖子数据
posts_with_avatars = []

for post in posts:
    # 查询当前用户的头像
    avatar_res = supabase.table('users').select('profile_picture').eq('name', post['name']).execute()
    # 取头像URL（处理查询无结果的情况）
    avatar_url = avatar_res['data'][0]['profile_picture'] if avatar_res['data'] else ''
    # 合并帖子信息和头像
    posts_with_avatars.append({
        'name': post['name'],
        'profile_picture': avatar_url
    })

# 将合并后的数据集传给模板
return render_template('feed.html', posts=posts_with_avatars)

2. 修改Jinja2模板，正确渲染每个帖子的头像 #

直接遍历合并后的数据集，每个条目单独渲染文本和头像：

{% for post in posts %}
    <div class="post-entry">
        <!-- 渲染文本信息 -->
        <p>{{ post.name }}</p>
        <!-- 渲染头像 -->
        <img class="small_pic rounded-circle" src="{{ post.profile_picture }}" alt="Profile">
    </div>
{% endfor %}

优化建议（可选） #

当前循环查询数据库的方式会产生多次请求，效率较低。可以使用Supabase的关联查询一次性获取所有数据：

# 假设posts表的name字段与users表的name字段关联
res = supabase.table('posts').select('name, users(profile_picture)').execute()
posts_with_avatars = []
for item in res['data']:
    posts_with_avatars.append({
        'name': item['name'],
        'profile_picture': item['users'][0]['profile_picture'] if item['users'] else ''
    })
return render_template('feed.html', posts=posts_with_avatars)

内容的提问来源于stack exchange，提问作者Taylor F.