求助：Wagtail Snippet索引页仅显示图片名称，需显示图片本身

实现思路 #

在模型中新增自定义方法，借助Wagtail Images的get_rendition生成缩略图的HTML代码，再将SnippetViewSet的list_display中原image字段替换为这个自定义方法即可。

修改代码步骤 #

1. 导入必要模块 #

确保代码顶部导入所需工具：

from django.utils.html import format_html

2. 在Product模型中添加图片显示方法 #

在Product类里新增display_image方法，用于返回图片的HTML渲染代码：

class Product(ClusterableModel):
    # 原有字段保留不变
    name = models.CharField(max_length=255)
    image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
    )
    sku = models.CharField(max_length=128)
    number = models.IntegerField()

    # 新增：生成图片缩略图的HTML
    def display_image(self):
        if self.image:
            # 生成100x100的填充式缩略图，尺寸可按需调整
            rendition = self.image.get_rendition('fill-100x100')
            return format_html('<img src="{}" alt="{}" width="100" height="100">', rendition.url, self.image.title)
        # 无图片时显示占位符
        return "-"
    
    # 原有方法和panels保持不变
    def schedule(self):
        return format_html("<a>First</a> | <a>Second</a>")

    panels = [
        FieldPanel("name"),
        FieldPanel("image"),
        FieldPanel("sku"),
        FieldPanel("number"),
    ]

    def __str__(self):
        return self.name

3. 更新ProductViewSet的列表配置 #

把list_display里的"image"替换为新增的"display_image"：

class ProductViewSet(SnippetViewSet):
    model = Product
    menu_icon = "pilcrow"
    menu_order = 200
    add_to_admin_menu = True

    search_fields = ("name", "sku")
    # 替换image字段为自定义的display_image方法
    list_display = ("name", "sku", "display_image", "number", "schedule")
    # 可选：设置列表中可点击跳转编辑页的字段
    list_display_links = ("name", "sku")

补充说明 #

• 缩略图尺寸可通过修改get_rendition的参数调整，比如max-80x80（按比例缩放，最大边不超过80px）等Wagtail支持的图片规格。
• 如果需要给图片添加跳转链接（比如跳转到图片详情页），可修改display_image方法的HTML代码，增加<a>标签包裹图片。

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