# Issue with Zola Template - Image Not Displaying

**URL:** <https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005>\
**Category:** Support\
**Created:** [January 12, 2024, 11:45am UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005 "2024-01-12T11:45:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CaseyJamess](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/caseyjamess/32/1164_2.png) [@CaseyJamess](https://zola.discourse.group/u/CaseyJamess)\
**Post date:** [January 12, 2024, 11:45am UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/1 "2024-01-12T11:45:55Z")

</div>

Hey Zola Community!

Really tearing my hair out here and I know the issue will be something that is so simple but I just can’t seem to resolve it -

In my blog/journal journal.html I’m trying to be able to display an image that will be unique to each blog post:

```auto
{% extends "base.html" %}
{% block content %}
  <section class="journal">
    <div class="journal__hero">
      <h1 class="journal__title">{{ section.title }}</h1>
    </div>

    <article class="journal__article">
      <ul class="journal__list">
        {% for page in section.pages %}
          <li class="journal__item">
            {% if page.image %}
              <img src="{{ page.image }}" alt="{{ page.title }}">
            {% endif %}
            <a href="{{ page.permalink | safe }}" class="journal__link">{{ page.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </article>
  </section>
{% endblock content %}

```

the page.title works perfectly fine and shows my various page titles, however the image doesn’t display!

I’m colocating the assets in each specific journal post, with my file structure like :  
|-- content/  
| |-- journal/  
| | |-- \_index.md  
| | |-- first-post/  
| | | |-- index.md  
| | | |-- hello.png

```auto
this is my _index.md: 
+++
title = "Checkout what I've been up to -"
sort_by = "date"
template = "journal.html"
page_template = "journal-page.html"
+++

and this is my index.md:
+++
title = "My First Post"
date = 2019-11-27
image = "hello.png"
+++
This is the content of my first post.

```

Any idea why I can’t get the image to display there?

I can write it in markup directly and it works of course or link in a traditional way, but I obviously want the template file to be able to display all the images that I will have in various blog posts - not have to keep extending the markup in my journal.html file!

Thanks in advance for the resolution!!

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [January 12, 2024, 1:01pm UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/2 "2024-01-12T13:01:37Z")

</div>

You need to put `image` in the `extra` section of the front-matter, not at the top level

---

<div class="post-metadata">

**Author:** ![CaseyJamess](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/caseyjamess/32/1164_2.png) [@CaseyJamess](https://zola.discourse.group/u/CaseyJamess)\
**Post date:** [January 12, 2024, 1:16pm UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/3 "2024-01-12T13:16:46Z")

</div>

but then how can I display that image in journal.html (which is an index that displays all of my posts) without repeating the same lines?

like here

![{{ page.title }}]()

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [January 12, 2024, 1:27pm UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/4 "2024-01-12T13:27:35Z")

</div>

page.extra.image

---

<div class="post-metadata">

**Author:** ![CaseyJamess](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/caseyjamess/32/1164_2.png) [@CaseyJamess](https://zola.discourse.group/u/CaseyJamess)\
**Post date:** [January 13, 2024, 3:12am UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/5 "2024-01-13T03:12:15Z")

</div>

Hey thanks so that half worked - displayed the image placeholder on the screen but this is how I actually got it to work by utilising page.slug:

\<img src=“/journal/{{ page.slug }}/{{ page.extra.image }}”

I’m not sure sure why this works - it’s something that I need to read up more on - thanks though!

---

<div class="post-metadata">

**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\
**Post date:** [January 22, 2024, 1:02am UTC](https://zola.discourse.group/t/issue-with-zola-template-image-not-displaying/2005/6 "2024-01-22T01:02:13Z")

</div>

If you want a cleaner approach, did you try using `get_url`?

```tera
src="{{ get_url(path=page.extra.image) }}"

```