Image not being output in a Gutenberg custom block

Question

A bit new to Gutenberg, and for the past 10 hours I've been trying to allow background image uploads for a nested block as per this guide: https://www.liip.ch/en/blog/add-an-image-selector-to-a-gutenberg-block

It works just fine in the backend, but the image is not output at all on the frontend.

What's the proper way to carry over the styles from edit.js over to the save() {} function?

My end goal is to output a wrapper div with the image as a background:url.

block.js

// block.js

import edit from './edit';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.editor;

registerBlockType( 'myblock-container-widget/image-selector', {
    title: __( 'Container block', 'myblock-container-widget' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'Container block', 'myblock' ),
    ],

    supports: {
        align: [ 'full' ],
    },

    attributes: {
        bgImageId: {
            type: 'number',
        },
    },

    edit,

    save() {
        return (


            <InnerBlocks.Content />
        );
    },
} );

edit.js

// edit.js

// Load dependencies
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { InspectorControls, InnerBlocks, MediaUpload, MediaUploadCheck } = wp.editor;
const { PanelBody, Button, ResponsiveWrapper, Spinner } = wp.components;
const { compose } = wp.compose;
const { withSelect } = wp.data;

const ALLOWED_MEDIA_TYPES = [ 'image' ];

class ImageSelectorEdit extends Component {
    render() {
        const { attributes, setAttributes, bgImage, className } = this.props;
        const { bgImageId } = attributes;
        const instructions = <p>{ __( 'To edit the background image, you need permission to upload media.', 'myblock-container-widget' ) }</p>;

        let styles = {};
        if ( bgImage && bgImage.source_url ) {
            styles = { backgroundImage: `url(${ bgImage.source_url })` };
        }

        const onUpdateImage = ( image ) => {
            setAttributes( {
                bgImageId: image.id,
            } );
        };

        const onRemoveImage = () => {
            setAttributes( {
                bgImageId: undefined,
            } );
        };

        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Background settings', 'myblock-container-widget' ) }
                        initialOpen={ true }
                    >
                        <div className="wp-block-myblock-container-widget-image">
                            <MediaUploadCheck fallback={ instructions }>
                                <MediaUpload
                                    title={ __( 'Background image', 'myblock-container-widget' ) }
                                    onSelect={ onUpdateImage }
                                    allowedTypes={ ALLOWED_MEDIA_TYPES }
                                    value={ bgImageId }
                                    render={ ( { open } ) => (
                                        <Button
                                            className={ ! bgImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview' }
                                            onClick={ open }>
                                            { ! bgImageId && ( __( 'Set background image', 'myblock-container-widget' ) ) }
                                            { !! bgImageId && ! bgImage && <Spinner /> }
                                            { !! bgImageId && bgImage &&
                                                <ResponsiveWrapper
                                                    naturalWidth={ bgImage.media_details.width }
                                                    naturalHeight={ bgImage.media_details.height }
                                                >
                                                    <img src={ bgImage.source_url } alt={ __( 'Background image', 'myblock-container-widget' ) } />
                                                </ResponsiveWrapper>
                                            }
                                        </Button>
                                    ) }
                                />
                            </MediaUploadCheck>
                            { !! bgImageId && bgImage &&
                                <MediaUploadCheck>
                                    <MediaUpload
                                        title={ __( 'Background image', 'myblock-container-widget' ) }
                                        onSelect={ onUpdateImage }
                                        allowedTypes={ ALLOWED_MEDIA_TYPES }
                                        value={ bgImageId }
                                        render={ ( { open } ) => (
                                            <Button onClick={ open } isDefault isLarge>
                                                { __( 'Replace background image', 'myblock-container-widget' ) }
                                            </Button>
                                        ) }
                                    />
                                </MediaUploadCheck>
                            }
                            { !! bgImageId &&
                                <MediaUploadCheck>
                                    <Button onClick={ onRemoveImage } isLink isDestructive>
                                        { __( 'Remove background image', 'myblock-container-widget' ) }
                                    </Button>
                                </MediaUploadCheck>
                            }
                        </div>
                    </PanelBody>
                </InspectorControls>
                <div
                    className={ className }
                    style={ styles }
                >
                    <InnerBlocks />
                </div>
            </Fragment>
        );
    }
}

export default compose(
    withSelect( ( select, props ) => {
        const { getMedia } = select( 'core' );
        const { bgImageId } = props.attributes;

        return {
            bgImage: bgImageId ? getMedia( bgImageId ) : null,
        };
    } ),
)( ImageSelectorEdit );