Django Wagtail - 图像未显示在 BlogIndexPage

Question

I am following along with the Wagtail's Your First Wagtail Site , specifically including the main image as a thumbnail alongside each post in the BlogIndexPage. Everything was working fine until I added custom HTML.

Models.py:

class BlogIndexPage(Page):

    templates = "blog/blog_index_page.html"
    max_count = 1

    intro = RichTextField(blank=True)

    def get_context(self, request):

        # Update context to include only published guides, ordered by reverse-chron
        context = super().get_context(request)
        blogpages = self.get_children().live().order_by('-first_published_at')
        context['blogpages'] = blogpages
        return context

    content_panels = Page.content_panels + [
        FieldPanel('intro', classname="full")
    ]

class BlogPage(Page):

    templates = "blog/blog_page.html"

    date = models.DateField("Post date")
    intro = models.CharField(max_length=250, blank=True, null=True)
    body = RichTextField(blank=True, null=True)
    tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
    categories = ParentalManyToManyField('blogs.BlogCategory', blank=True)

    def main_image(self):
        gallery_item = self.gallery_images.first()
        if gallery_item:
            return gallery_item.image
        else:
            return None

    search_fields = Page.search_fields + [
        index.SearchField('intro'),
        index.SearchField('body'),
    ]

    content_panels = Page.content_panels + [
        MultiFieldPanel([
            FieldPanel('date'),
            FieldPanel('tags'),
            FieldPanel('categories', widget=forms.CheckboxSelectMultiple),
        ], heading="Blog information"),
        FieldPanel('intro'),
        FieldPanel('body'),
        InlinePanel('gallery_images', label="Gallery images"),
    ]

blog_index_page.html: (Everything was working fine using Wagtail's example HTML, but once I added my own custom HTML the images stopped working. Inspect Element shows that the images.jpgs are being sourced correctly, they just don't show up. The URLS, title, and intro are working fine.)

{% load wagtailcore_tags wagtailimages_tags %}

<div id="posts" class="post-grid grid-container clearfix" data-layout="fitRows">
  {% for post in page.get_children %} {% with post=post.specific %}
  <div class="entry clearfix">
    <div class="entry-image">
      {% with post.main_image as main_image %} {% if main_image %}
      <a href="{{ main_image.url }}" data-lightbox="image"
        ><img
          class="image_fade"
          src="{{ main_image.url }}"
          alt="{{ main_image.alt }}"
      /></a>
      {% endif %} {% endwith %}
    </div>
    <div class="entry-title">
      <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
    </div>
    <div class="entry-content">
      <p>{{ post.intro|richtext }}</p>
      <a href="{% pageurl post %}" class="more-link">Read More</a>
    </div>
  </div>
  {% endwith %} {% endfor %}
</div>

Answer 1

It looks like you're not importing/declaring the images using the wagtailimages_tags. You should have added something along the line of this before you start using the actual image: {% image post.main_image %}