如何在Wagtail模板中正确渲染StreamField存储的外部链接与富图片

你遇到的问题源于模板中对StructBlock字段的取值路径错误。Wagtail StreamField的StructBlock类型的所有子字段内容，都存放在block.value属性下，无法直接通过block.子字段名访问内容。

修正方案如下：

1. 确保模板开头已引入Wagtail图片模板标签（如果之前没加的话）：

{% load wagtailimages_tags %}

2. 将rich_image块的渲染代码修改为如下形式，即可实现点击图片跳转外部链接的需求：

{% if block.block_type == 'rich_image' %}
    <a href="{{ block.value.image_link }}">
        {% image block.value.image fill-320x320 %}
    </a>
{% endif %}

说明：

• block.value.image对应StructBlock中定义的image字段值，也就是你在编辑器中选中的图片对象，可被{% image %}标签正确解析生成img标签
• block.value.image_link对应StructBlock中定义的image_link字段值，也就是你在编辑器中填写的外部链接地址

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