There are a few different strategies for using an image file for the ‘preview’ in an ACF-created custom Gutenberg block but this one (so far) seems to be the most effective for me.
I added the following to where I register my ACF block:
'example' => array(
'attributes' => array(
'mode' => 'preview',
'data' => array(
'_is_preview' => 'true'
)
)
),
And utilize it by creating a conditional in the block markup template with:
<?php // Block preview
if( !empty( $block['data']['_is_preview'] ) ) { ?>
<figure>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/screencap-accordion.png" alt="Preview of what the Accordion custom block appears minimized">
</figure>
<?php } else { ?>
// Actual block content would go here.
<?php } ?>