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!

Take

values[].value.mediaKey

and pass that into

/umbraco/management/api/v1/media/{key}

you will get something like this

{
  "urls": [
    {
      "culture": null,
      "url": "https://localhost:44339/media/tidd55i2/creative-technology-showreel-241274.mp3"
    }
  ],
  "isTrashed": false,
  "mediaType": {
    "id": "4c52d8ab-54e6-40cd-999c-7a5f24903e4d",
    "icon": "icon-document",
    "collection": null
  },
  "id": "5dd46f69-893b-49e5-b871-95ad86573c0c",
  "values": [
    {
      "editorAlias": "Umbraco.UploadField",
      "culture": null,
      "segment": null,
      "alias": "umbracoFile",
      "value": {
        "src": "/media/tidd55i2/creative-technology-showreel-241274.mp3"
      }
    },
    {
      "editorAlias": "Umbraco.Label",
      "culture": null,
      "segment": null,
      "alias": "umbracoExtension",
      "value": "mp3"
    },
    {
      "editorAlias": "Umbraco.Label",
      "culture": null,
      "segment": null,
      "alias": "umbracoBytes",
      "value": "3535934"
    }
  ],
  "variants": [
    {
      "createDate": "2024-10-02T09:08:30.709983+02:00",
      "updateDate": "2024-10-02T09:08:30.709983+02:00",
      "culture": null,
      "segment": null,
      "name": "creative-technology-showreel-241274.mp3"
    }
  ]
}

You can then get the urls from it's response in

urls.url

do note that this is the uncropped version, so if you have crops defined on the media item (second request) or on the picker (first request) you will have to add them to the url yourself.

I kind of see a problem here. Calling the Delivery API to get the content of the webpage in a headless manner, i would suspect the url to be provided in the response from the API. Having to call the media api afterwards just to get a url seems weird to me. Let's take an example of a content page, with 50 different images. What this means is that i now have to do 51 total requests, just to get the url for all the images (could make a combined request of course), but having this many requests really seems redundant.

the content delivery api has as it is designed to give you a more complete view of the published content (if you allow auto property expension).

In the backoffice, we use this to get the direct image url (thumbnail): GET /umbraco/management/api/v1/imaging/resize/urls It supports

id

,

width

,

height

, and

mode

. Id = guid Width & height = pixel value Mode = crop or one of the other Image Sharp values