Hi, This is my implementation:

import { html, customElement, LitElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
import { type UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import { UmbMediaUrlRepository } from '@umbraco-cms/backoffice/media';
import {Task} from '@lit/task';

// UmbBlockDataType
@customElement('image-component')
export class ImageBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {

    @property({ attribute: false })
    content?: UmbBlockDataType;
    #itemRepository = new UmbMediaUrlRepository(this);

    private _productTask = new Task(this, {
        task: async ([desktopImage]) => {
            const img: {mediaKey: string}[] = desktopImage as {mediaKey: string}[];
            const { data: items } = await this.#itemRepository.requestItems([img[0].mediaKey]);

            if (items === undefined || items.length === 0 || items[0].url === undefined) { 
                throw new Error(`Media doesn't exist: ${img[0].mediaKey}`); 
            }

          return items[0].url;
        },
        args: () => [this.content?.desktopImage]
      });

    override render() {
        return this._productTask.render({
            initial: () => html`<p>Waiting to start task</p>`,
            pending: () => html`<p>Loading media...</p>`,
            complete: (url) => html`
            <figure class="image-container">
                <img src="${url}?rmode=min&width=1440&format=webp&quality=80" class="img-responsive" />
            </figure>
            `,
            error: (e) => html`<p>Error: ${e}</p>`
        });
    }
}

export default ImageBlockCustomView;