Gutenberg Block: Image resolution

Question

I was asking the same question in the comments of another question.

The solution is (thanks to Кирилл-Меркушев), to get another URL from the onSelect Callback.

Before I had this:

function onSelectImage( media ) {
    props.setAttributes( { mediaURL: media.url } );
    props.setAttributes( { mediaID: media.id } );
}

Then I console logged the media parameter, where I could find the different size URLs, so I changed it to this for my use:

function onSelectImage( media ) {
    console.log(media);
    var url;
    if (media.sizes.medium.url) {
        url = media.sizes.medium.url;
    } else if (media.sizes.thumbnail.url) {
        url = media.sizes.thumbnail.url;
    } else {
        url = media.url;
    }
    props.setAttributes( { mediaURL: url } );
    props.setAttributes( { mediaID: media.id } );
}