Navigation question - add image in menu items

I have the following code:

    {% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
    {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
    {% for row in page.collection()|batch(4) %}
     <ul class="nav_overlay nav-{{ loop.index }}">
      {% for module in row %}
        {% if not module.header.hidemenu %}
        {% set current_module = ( or module.activeChild) ? 'active' : '' %}
            <li class="{{ current_module }}">
                <a href="#{{ _self.pageLinkName( }}"><i class="fa fa-link"></i>{{ }}</a>
        {% endif %}
    {% endfor %}
    {% endfor %}

The output is the links to the pages which do have the page.header : menu: <>. This is the expected result.

Now I like to add an image here. I do have in the page.header an image: <>.

title: Collectie
menu: Collectie
hidemenu: false
image: raambekleding.jpg

How can I get the image url and the image displayed in the navigation?

Thanks in advance,

Take a look into this:

If you have uploaded the image to the page, it should be possible to use something like this:

{{[page.header.image].url }}

if you want the image being displayed, use something like this:

{{[page.header.image].html('My title', 'Some ALT text', 'myclass') }}

Hi, thanks for your answer. Unfornately you solutions don’t work. Probably because the .twig template file is a partial and loops through the modular pages to find the titles of the ‘pages’.

The code output is:

See the image src = unknown.

The macro … {% macro pageLinkName with the “” works for the page titles, but how can I have the images (in the same page.header) of the modular pages in my navigation?

Thanks in advance,