Issue with displaying the image in an Apostrophe css widget

I'm having difficulty displaying an image uploaded via an Apostrophe widget. Specifically I'm creating a 'hero' widget with a background image, title and description text over the top of the image. The widget seems to be working correctly as I can add title and description text in, but the image does not display. The error I am seeing in the command line is:

'Template warning: Impossible to retrieve the attachment url since it is missing, a default icon has been set. Please fix this ASAP!'

index.js for the widget:

module.exports = {
    extend: 'apostrophe-widgets',
    name: 'heroimage',
    label: 'Hero Image',
    addFields: [
        {
            name: 'hero-image',
            label: 'Hero Image',
            type: 'attachment',
            widgetType: 'apostrophe-images',
            required: true,
            extensions: [ 'jpg', 'png' ],
            extensionMaps: {
              jpeg: 'jpg'
            },
            // uploadfs should treat this as an image and create scaled versions
            image: true,
            options: {
                minSize: [ 1280, 900 ],
                limit: 1,
            }
        },
        {
            name: 'hero-title',
            label: 'Hero Title',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        },
        {
            name: 'hero-description',
            label: 'Hero Description',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        }
    ]
};

widget.html:

<div class="hero align-center-middle text-center"
    style="background: url('{{ apos.attachments.url(image.attachment) }}'); background-size:cover; background-position:center;">
    <div class="grid-x grid-padding-x">
        <div class="cell">
            <h1>
                {{ apos.area(data.widget, 'hero-title') }}
            </h1>
        </div>
        <div class="cell">
            <p>
                {{ apos.area(data.widget, 'hero-description') }}
            </p>
        </div>
    </div>
</div>

I've tried every combination of code inside the '{{ apos.attachments.url(image.attachment) }}' but nothing seems to work. Have I done this correctly, is there something I am missing? Any help is greatly appreciated.

Thanks, Jon

Solution

First, don't use hyphens in schema field names. It just makes them harder to work with by forcing the use of the bracket syntax. Also it is disallowed entirely for a few other property types. Use camel case:

{
  name: 'heroImage',
  // etc.
}

Second, you are using the variable "image" in your widget.html template but it is not being assigned from anywhere, so it is undefined. If you want access to a property of the widget, you need to reference it as a property of the widget:

data.widget.heroImage

Once you do that everything should work out fine.

Third: extensionMaps is a feature for configuring the attachments module itself, it has no effect here. And extension is not an option in this situation either. You can set group to images (which allows GIF, JPEG or PNG) or to office (which allows a range of office-related formats like txt or pdf).