Wagtail feed_image not Displaying on Index Page

Question

I cannot seem to figure out why my feed_image works on the page when called as {{ self.feed_image }} but when trying to add to the index page, it will not display - just shows a broken image.

snippet

@register.inclusion_tag(
    'tags/_product-snippets.html',
    takes_context=True
)
def product_snippets(context, calling_page):
    pages = calling_page.get_children().live()
    return {
        'pages': pages,
        # required by the pageurl tag that we want to use within this template
        'request': context['request'],
    }

tag

<div class="row">
    {% for page in pages %}
      <div class="col-md-3 col-sm-4 col-xs-12">
        <div class="shop-item-container-in">
          {% image page.feed_image as img %} 
          <img src="{{ img.url }}" alt="{{ page.title }}" title="{{ page.title }}" class="img-responsive center-block shop-item-img-list-view"/>
        </div>
        <h4><a href="{% pageurl page %}">{{ page.title }}</a></h4>
        <a href="{% pageurl page %}" class="button button-md button-pasific hover-icon-wobble-horizontal mt25">More<i class="fa fa-shopping-basket"></i></a>
      </div>
    {% endfor %}
  </div>

html

...
{% product_snippets calling_page=self %}
...

Answer 1

When you query the page tree using a method like:

pages = calling_page.get_children().live()

you'll initially only get basic Page objects consisting of the core fields such as title and slug. This is for performance reasons - fetching the detailed page content requires additional hits to the database. To retrieve the full page data including feed_image, add specific():

pages = calling_page.get_children().live().specific()