Display images from FILE upload

Hi guys,

Had a look over the forums but none of the solutions I've seen seem to be working for me. I have the following in my blueprint which allows me to successfully upload an image.

header.yoyo.hero.image:
                    ordering@: 5
                    type: file
                    label: Media
                    destination: 'self@'
                    multiple: false
                    accept:
                      - image/*
                      - video/*

Within the twig template I can access it perfectly fine by filename e.g.

<img src="{{ page.media['illo-caterers-2x.png'].url }}"/>

I just can't figure out how to display the image by the blueprint variable name, I've tried the below and it gives me a null for the url.

{{ dump(page.media[yoyo.hero.image].url()) }}

ok so I got it working with this, however if someone can explain why I can't just do:

Doesn't Work

{{ page.header.yoyo.hero.image.url }}

Works

        {% for key,val in page.header.yoyo.hero.image %}
            {% set myimagepath = '/' ~ val.path %}
            <img src="{{home_url}}{{myimagepath}}" class="hero-img" />
        {% endfor %}