如何在Wagtail模板中实现图片存在时在标题旁添加图片的if语句

结合你的需求和现有代码，修改后的完整Wagtail模板代码如下，可实现仅当成员存在图片时，在无序列表的<h3>旁显示对应图片：

{% load wagtailimages_tags %}

<section class="container">
    <h2 class="text-center">{{ self.title }}</h2>
    <div class="general-alumnae-deck">
        <ul>
            {% for member in self.general_member_cards %}
                <li>
                    {% if member.photo %}
                        {% image member.photo fill-50x50 class="avatar" alt=member.name %}
                    {% endif %}
                    <h3>{{ member.name }}</h3>
                </li>
            {% endfor %}
        </ul>
    </div>
</section>

关键说明： #

• 新增<ul>和<li>标签构建你需要的无序列表结构
• 使用Wagtail内置的{% image %}标签渲染图片，通过member.photo动态绑定图片资源：
  • fill-50x50是Wagtail的图片裁剪参数，可根据实际需求调整尺寸（比如max-80x80）
  • class="avatar"对应你预期结构中的图片样式类
  • alt=member.name用成员名称作为图片的alt文本，提升可访问性
• {% if member.photo %}条件判断确保只有当图片字段有内容时才渲染<img>标签，无图片时仅显示<h3>内容

注：代码中的member.name需要替换为你实际的成员名称字段（比如member.title或其他模型字段名）

内容的提问来源于stack exchange，提问作者Juan Monster