Question

我目前正在测试w ,,发现了一个问题。我有这样的模型

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教程中一样）。但是我想在我的模板中将我输入的数据包装到这样的bootstap代码中：

{% 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＆＃34; button＆＃34; class，但是当涉及到图片时，它不会在我想要的时候在页面中呈现，例如，将它包装到bootstrap＆＃34; card＆＃34;类。当我只使用这样的普通代码时，图片显示在页面中 {% image page.photo width-400 %}，但是当我在bootstrap＆＃34; card＆＃34;中使用此代码时，它不会出现。类。引导程序本身在页面上正常工作。任何帮助赞赏。谢谢。

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">

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

1 个答案: