Backoffice Api vs Content Delivery Api Umbraco 15
m

Morten

11 months ago
I'm working on custom backoffice views in Umbraco 15 with a headless setup using Vue components and the Content Delivery API. I've successfully integrated our Vue components from the frontend into the backoffice custom views, but I'm running into an issue with image handling. The Content Delivery API and Backoffice API return different structures for the same content. While we can handle the conversion for most block types, I'm specifically stuck on how to get the image URLs from the Backoffice API. For example, the Content Delivery API returns the image URL directly in the
url
property, but in the Backoffice API, I only get the
mediaKey
. Is there a way to get the full image URL from the Backoffice API? Do I need to make an additional call to some dictionary or service? Here are the two different responses for comparison: Content Delivery API response:
json
{
    "image": [{
        "bytes": 9583,
        "crops": [],
        "extension": "png",
        "focalPoint": null,
        "height": 155,
        "id": "d789d27b-e906-4b3b-b82e-2eb023722eb1",
        "mediaType": "Image",
        "name": "Ico 1",
        "properties": {},
        "url": "/media/pxjitvyg/ico_1.png",
        "width": 152
    }]
}
Backoffice API response:
json
{
    "contentTypeKey": "8c650da5-2282-4f8b-a656-74583a99b878",
    "key": "f9025e08-80d3-4208-a35e-cdea8afe89c9",
    "udi": null,
    "values": [{
        "alias": "image",
        "culture": null,
        "editorAlias": "Umbraco.MediaPicker3",
        "segment": null,
        "value": [{
            "crops": [],
            "focalPoint": null,
            "key": "141855ed-12bd-445d-820f-5dc247978a10",
            "mediaKey": "d789d27b-e906-4b3b-b82e-2eb023722eb1",
            "mediaTypeAlias": "Image"
        }]
    }]
}
Any guidance would be appreciated!