Hi Ivan,

To clarify the usage and types for this.content?.images, you'll need to typecast it to either UmbMediaPickerPropertyValue or a custom type, as Umbraco's media picker typically returns an array of objects with mediaKey (GUIDs) rather than URLs. You'll fetch the URL using these GUIDs.

you need to retrieve the URL for each media key. In Umbraco, this can be done by using UmbImagingRepository, to fetch the media URLs based on the keys provided by the media picker.

here is the example for this:

import { html, customElement, LitElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; // Import the repository
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
import type { UmbMediaPickerPropertyValue } from '@umbraco-cms/backoffice/media';

@customElement('example-block-custom-view')
export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {

    @property({ attribute: false })
    content?: UmbBlockDataType;

    @state()
    logos: UmbMediaPickerPropertyValue[] = [];

    @state()
    logoUrls: Map<string, string> = new Map();

    #imagingRepository = new UmbImagingRepository(this);

    async updated(changedProperties: Map<string | number | symbol, unknown>) {
        super.updated(changedProperties);
        if (changedProperties.has('content') && this.content?.logo) {
            this.logos = this.content.logo as UmbMediaPickerPropertyValue[];
            await this.fetchLogoUrls();
        }
    }

    async fetchLogoUrls() {
        for (const logoItem of this.logos) {
            if (logoItem.mediaKey && !this.logoUrls.has(logoItem.mediaKey)) {
                const url = await this.resolveMediaUrl(logoItem.mediaKey);
                if (url) {
                    this.logoUrls.set(logoItem.mediaKey, url);
                    this.requestUpdate(); // Trigger a re-render to update URLs
                }
            }
        }
    }

    async resolveMediaUrl(mediaKey: string): Promise<string> {
        const { data } = await this.#imagingRepository.requestThumbnailUrls([mediaKey], 300, 300);
        return data?.[0]?.url ?? '';
    }

    override render() {
        console.log(this.content);
        return html`
            <h5>My Custom View</h5>
            <p>Headline: ${this.content}</p>
            <div class="logo-container">
                ${this.logos.map((logoItem: UmbMediaPickerPropertyValue) => html`
                    <img src="${this.logoUrls.get(logoItem.mediaKey) || ''}" alt="Logo" />
                `)}
            </div>
        `;
    }

    static override styles = [
        css`
            :host {
                display: block;
                height: 100%;
                box-sizing: border-box;
                background-color: #dddddd;
                border-radius: 9px;
                padding: 12px;
            }
        `,
    ];
}

export default ExampleBlockCustomView;

declare global {
    interface HTMLElementTagNameMap {
        'example-block-custom-view': ExampleBlockCustomView;
    }
}

Hope this helps