Gutenberg: Block validation error ( Not saving image )

[AshiqKiron]

Image is not being saved on li node. And I get this error on console.

<div class="wp-block-tar-theme-accordion-image-block accordimg"><ul>
<li style="background-image:url(undefined)">
<div class="text--container">
<h3 style="color:#111;font-size:15px">Nature</h3></div></li></ul></div>

Actual:
<div class="wp-block-tar-theme-accordion-image-block accordimg"><ul>
<li style="background-image:url(http://localhost/wppro/wp-content/uploads/2018/08/car-172905_1280.jpg)">
<div class="text--container">
<h3 style="color:#111;font-size:15px">Nature</h3></div></li></ul></div>

Block validation: Expected attribute style of value background-image:url(undefined), saw background-image:url(http://localhost/wppro/wp-content/uploads/2018/08/car-172905_1280.jpg).

Here's the full block code

/**
 * BLOCK: Tar Accordion Image Block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';




// let's us call registerBlockType() directly from the wp.blocks library
const { 
    registerBlockType, 
} = wp.blocks;


// let's us use the withAPIData() function from the wp.components library to access the Rest API
const {
    PanelBody,
    PanelColor,
    FormToggle,
    RangeControl,
    SelectControl,
    ToggleControl,
    Button 
} = wp.components;

// let's us use the __() function from the wp.i18n library to translate strings
const { __ } = wp.i18n;


const { Fragment } = wp.element;
const {
    RichText,
    BlockControls,
    InspectorControls,
    MediaUpload,
    ColorPalette,
    BlockDescription,
    BlockAlignmentToolbar,
    PanelColorSettings,
} = wp.editor;


const accordionImageEdit = ( props ) => {

    const { isSelected, className, setAttributes } = props;

    const { 
        textColor,
        textSize,
        imgOneID,
        imgOneURL,
        imgOneTxt,
     } = props.attributes;

    //Handle Image changes
    const onSelectImageOne = ( media ) => {
        setAttributes( {
            imgOneURL: media.url,
            imgOneID: media.id,
        } );
    };


     return [
         isSelected && (
            <InspectorControls key= { 'inspector' } >

                <PanelBody title={__('Accordion Settings', 'tar')}>

                    <RangeControl 
                    label= { __('Text Size', 'tar') }
                    value= { textSize }
                    min= '18'
                    max= '30'
                    onChange={ (sizeSetting) => setAttributes({ textSize : sizeSetting }) }
                    />

                    <PanelColorSettings 
                        title={ __('Text Color', 'tar') }
                        colorSettings= { [ 
                            {
                            value: textColor,
                            onChange: (colorValue) => setAttributes ( { textColor: colorValue } ),
                            label: __('Color', 'tar'),
                            },
                         ] }
                    />
                </PanelBody>

            </InspectorControls>
         ),

         <div class="accordimg">
            <ul>
            <li>
                <MediaUpload
                        onSelect={ onSelectImageOne }
                        type="image"
                        value={ imgOneID }
                        render={ ( { open } ) => (
                            <Button className={ imgOneID ? 'image-button' : 'button button-large' } onClick={ open }>
                                { ! imgOneID ? __( 'Upload Image', 'tar' ) :  <img src={ imgOneURL } alt={ __( 'Upload Image', 'tar' ) } /> }
                            </Button>
                        ) }
                    />


                <div className="text--container">
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Nature', 'tar' ) }
                    value={ imgOneTxt }
                    onChange={  (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
                    style={{ fontSize: textSize + 'px', color: textColor  }}

                />
                </div>

                </li>
            </ul>
            </div>
     ]
}

const accordionImageSave = ( props ) => {
    const { isSelected, className, setAttributes } = props;

    const { 
        textColor,
        textSize,
        imgOneID,
        imgOneURL,
        imgOneTxt,
     } = props.attributes;

     return (
         <div className="accordimg">
             <ul>
                <li 
                 style= { { backgroundImage: 'url(' + imgOneURL + ')',} }
                >
                    <div className="text--container">
                        <RichText.Content
                        tagName="h3"
                        value={ imgOneTxt }
                        style= { {
                            color: textColor, 
                            fontSize: textSize + 'px',

                        } }
                        />
                    </div>
                </li>

             </ul>
         </div>
     )
}

 registerBlockType('tar-theme/accordion-image-block',{
     title: __( 'Image accordion', 'tar' ),
     icon: 'share-alt',
     description: __('Image accordion block for Tar Theme', 'tar'),
     category: __('tar-blocks', 'tar'),
     keywords: [
         __( 'Image Accordion', 'tar'),
         __( 'Tar Thene', 'tar' ),
         __( 'Accordion Block', 'tar' ),
     ],
     attributes: {
         //shared attributes
         textColor: {
            type: 'string',
            default: '#111'
         },
         textSize: {
            type: 'number',
            default: 15,
         },
        //image one attributes
        imgOneID: {
             type: 'number',
        },
        imgOneURL: {
            type: 'string',
            source: 'attribute',
            selector: 'a',
            attribute: 'href',
        },
        imgOneTxt: {
            type: 'string',
            selector: 'h3',
            default: 'Nature',
        },
     },

     edit: accordionImageEdit,
     save: accordionImageSave,
 })

I tried putting style on li node like in my edit function but still it shows the exact same error.

<li style= { { backgroundImage: 'url(' + imgOneURL + ')',} }>

Can anybody shed a light. why it isn't saving image ?

Addition Information:
Gutenberg version 4.0.0
Plugin active: Gutenberg & Create-Guten-Block by Ahmad
Chrome version: 69.0.3497.100

[ajitbohra]

change

  imgOneURL: {
            type: 'string',
            source: 'attribute',
            selector: 'a',
            attribute: 'href',
        },

To

  imgOneURL: {
            type: 'string',
        },

currently you are trying to extract image URL from anchor tag which doesnt exist and will alway return undefined.