Custom gutenberg block image preview not working

by

I created a custom block. It works but not able to get the block
preview image working.

The cover in the code sample for the example prop was just an example attribute, so setting cover: '<image URL>' does not automatically displays the image when previewing the block via the block inserter.

However, the preview uses your edit function’s output, so whatever the function returns will be displayed in the preview panel/area, i.e. the editor will basically call your edit function and pass the attributes in the example prop.

So regarding this:

Getting the block preview is no problem. My card Block is creating the
preview. I want to display an image instead of the block preview.

One easy way would be to actually register the cover as an attribute for your block: (I would, however, use the name _cover where the underscore normally indicates something that is private or read-only)

  1. Register the attribute:

    attributes: {
    // your other attributes

    cover: {
        type: 'string',
        default: '', // keep it empty so it doesn't get saved in the post content
    },
},

  2. In the example prop, make sure cover is set to a valid image URL:

    example: {
    attributes: {
        cover: 'https://example.com/path/to/preview-image.jpg',
    },
    viewportWidth: 800,
},

  3. Start your edit function like so:

    if ( props.attributes.cover ) {
    return <img src={ props.attributes.cover } />;
}