无法在引导卡类中包装图像（使用 wagtail）答案

【问题标题】：Can't wrap an image in the bootstrap card class (using wagtail)无法在引导卡类中包装图像（使用 wagtail）
【发布时间】：2018-02-12 12:59:36
【问题描述】：

我目前正在测试 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 包装到引导程序“按钮”类中，但是当涉及到图片时，它不会在我想要的页面中呈现，例如，将其包装到引导程序“卡”中“ 班级。当我像这样使用普通代码时，图片显示在页面中 {% image page.photo width-400 %}，但是当我在引导程序“卡片”类中使用此代码时它不会出现。引导程序本身在页面上运行良好。任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： bootstrap-4 wagtail

【解决方案1】：

{% image page.photo width-300 %} 标签在结果页面中输出一个完整的<img ...> 元素，因此在inside 中使用<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">

【讨论】：