无法将图像包装在 bootstrap 卡片 class 中（使用 wagtail）

Question

我目前正在测试 wagtail 并遇到了一个问题。我有这样的模型

from django.db import models

from wagtail.wagtailcore.models import Page
from wagtail.wagtailadmin.edit_handlers import FieldPanel
from wagtail.wagtailimages.edit_handlers import ImageChooserPanel

class PostPage(Page):

    body = models.CharField(max_length=100)
    photo = models.ForeignKey(
        'wagtailimages.Image', on_delete=models.SET_NULL, related_name='+',
        blank=True, null=True
    )

    content_panels = Page.content_panels + [
        FieldPanel('body', classname='full'),
        ImageChooserPanel('photo'),
    ]

通过 wagtail 管理页面，我使用 CharField 输入一些文本并使用 ForeignKey 添加照片（就像在 wagtail 教程中一样）。但是后来我想在我的模板中像这样将我输入到引导程序代码中的数据包装起来：

{% extends 'base.html' %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-postpage{% endblock %}

{% block content %}

{{ page.title }}<br>
<button type="button" class="btn btn-primary">{{ page.body }}</button>
<br>
<div class="card" style="width: 18rem;">
    <img class="card-img-top" src={% image page.photo width-300 %} alt="Card image cap">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
{% image page.photo width-400 %}

{% endblock %}

问题是我实际上可以将 page.body 包装成 bootstrap "button" class，但是当涉及到图片时，它不会在页面中呈现例如，当我想将它包装成 bootstrap "card" class 时。当我像这样使用普通代码时，图片显示在页面中 {% image page.photo width-400 %}，但是我在bootstrap "card" class中使用这段代码时没有出现。 bootstrap 本身在页面上运行良好。任何帮助表示赞赏。谢谢。

Answer 1

{% image page.photo width-300 %} 标记在生成的页面中输出一个完整的 <img ...> 元素，因此在中使用 一个 <img> 元素将导致以下输出显然无效 HTML:

<img class="card-img-top" src=<img src="some-url.jpg"> alt="Card image cap">

这里有两条路线可供选择，如 http://docs.wagtail.io/en/v1.13.1/topics/images.html?highlight=img#more-control-over-the-img-tag 所述：

将 Bootstrap 所需的 class 属性作为 {% image %} 标记的一部分传递：

{% image page.photo width-400 class="card-img-top" %}

（你不需要在这里提供 alt，因为 {% image %} 已经提供了）

使用{% image .. as foo %}将相关的图像属性（例如URL）存储到一个变量中，这样您就可以将这些属性插入到<img>单个元素：

{% image page.photo width-400 as card_image %} <div class="card" style="width: 18rem;"> <img class="card-img-top" src={{ card_image.url }} alt="Card image cap">

无法将图像包装在 bootstrap 卡片 class 中（使用 wagtail）

Can't wrap an image in the bootstrap card class (using wagtail)

wagtail

bootstrap-4