MediaUploadCheck Background Image Gutenberg Block

Here’s the MediaUploadCheck component:

<MediaUploadCheck>
  <MediaUpload
    onSelect={(media) => setAttributes({ section_image: media.url, section_image_alt: media.alt })}
    type="image"
    allowedTypes={['image']}
    value={section_image}
    render={({ open }) => (
      <div>
        {section_image && (
          <>
            <Button
              isLink
              isDestructive
              onClick={() => setAttributes({ section_image: '', section_image_alt: '' })}
            >
              {__('Remove Section Image')}
            </Button>
            <img src={section_image} alt={section_image_alt || 'Image'} />
            {section_image_alt && (
              <p>{__('Alt Text:')} {section_image_alt}</p>
            )}
          </>
        )}
        <Button
          onClick={open}
          icon="upload"
          className="editor-media-placeholder__button is-button is-default is-large"
        >
          {__('Select Section Image')}
        </Button>
      </div>
    )}
  />
</MediaUploadCheck>

Don’t forget to include section_image_alt in the block’s attributes.

"section_image_alt": {
	  "type": "string"
	},

Make sure to include section_image in the list of variables being destructured from attributes.

export default function Edit({ attributes, setAttributes }) {
	const { section_style, section_class, section_id, section_image, section_image_alt, section_image_class, section_image_style, section_block, container_style, container_class, container_id, row_style, row_class, row_id, col_style, col_class, col_id, col_data_aos, col_data_aos_delay,col_data_aos_delay_offset } = attributes;

Here’s how to use in save.js

{attributes.section_image_alt}