title: Django Wagtail - Images not showing up on BlogIndexPage
body: <p>I am following along with the Wagtail's <a href="https://docs.wagtail.io/en/v2.8/getting_started/tutorial.html" rel="nofollow noreferrer">Your First Wagtail Site</a>, specifically including the main image as a thumbnail alongside each post in the BlogIndexPage. Everything was working fine until I added custom HTML.</p>
  
  <p><strong>Models.py:</strong></p>
  
  <pre><code>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"),
      ]
  </code></pre>
  
  <p><strong>blog_index_page.html:</strong> (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.)</p>
  
  <pre><code>{% load wagtailcore_tags wagtailimages_tags %}
  
  &lt;div id="posts" class="post-grid grid-container clearfix" data-layout="fitRows"&gt;
    {% for post in page.get_children %} {% with post=post.specific %}
    &lt;div class="entry clearfix"&gt;
      &lt;div class="entry-image"&gt;
        {% with post.main_image as main_image %} {% if main_image %}
        &lt;a href="{{ main_image.url }}" data-lightbox="image"
          &gt;&lt;img
            class="image_fade"
            src="{{ main_image.url }}"
            alt="{{ main_image.alt }}"
        /&gt;&lt;/a&gt;
        {% endif %} {% endwith %}
      &lt;/div&gt;
      &lt;div class="entry-title"&gt;
        &lt;h2&gt;&lt;a href="{% pageurl post %}"&gt;{{ post.title }}&lt;/a&gt;&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="entry-content"&gt;
        &lt;p&gt;{{ post.intro|richtext }}&lt;/p&gt;
        &lt;a href="{% pageurl post %}" class="more-link"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    {% endwith %} {% endfor %}
  &lt;/div&gt;
  </code></pre>