Flask基础博客如何在作者用户名旁正确渲染用户头像图片

解决方案 #

你需要使用HTML的<img>标签加载头像资源，直接输出字段值只会打印图片路径文本，无法触发图片渲染。

代码修改示例

把原第二行的作者信息行调整如下，即可在用户名后方插入头像：

<h2><a class="card-title" href="{{ url_for('blog_posts.blog_post', blog_post_id=post.blog_id) }}">{{ post.title }}</a></h2>
<!-- 修改后的作者信息行 -->
<a href="{{ url_for('users.user_posts', username=post.author.username) }}">
  Written By: {{ post.author.username }}
  <img 
    src="{{ post.author.profile_image }}" 
    alt="{{ post.author.username }}的头像"
    style="width:24px; height:24px; border-radius:50%; margin-left:6px; vertical-align: middle;"
  >
</a>

<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:150] }}...</p>
<a href="{{ url_for('blog_posts.blog_post', blog_post_id=post.blog_id) }}" class="btn btn-primary">Read Blog Post</a>

补充说明

• 如果你的头像存储在项目的static目录下，profile_image字段存的是static目录内的相对路径，需要把src属性值改为{{ url_for('static', filename=post.author.profile_image) }}才能正确生成访问路径
• 示例里的行内样式可以根据你的设计需求调整宽高、边距等参数，也可以把样式抽离到CSS文件中通过类名引用，代码规范度更高

内容的提问来源于stack exchange，提问作者Gabe Verzino