Как вывести фото с api?

Question

[cocojambo1]

Я использую api gallery.dev.webant.ru/api/photos и я хочу вывести фотки с него я даю в компонент путь к фотке через media_object но безрезультатно, я пробовал вводить contentUrl но ошибка

json который приходит

{
  "totalItems": 588,
  "itemsPerPage": 30,
  "countOfPages": 20,
  "data": [
    {
      "id": 79,
      "name": "New image",
      "description": "fresh, new image",
      "new": true,
      "popular": false,
      "image": {
        "id": 224,
        "contentUrl": "5bace356e5e5d387633311.png"
      }
    },
    {
      "id": 81,
      "name": "rrfwrewqerrew",
      "description": "rwrerwrwwr",
      "new": true,
      "popular": false,
      "image": {
        "id": 226,
        "contentUrl": "5bacee15e9f17619014749.png"
      }
    },
   и тд
}

вот код компонента ( использую devextreme )

<template>
    <li>
        <DxButton
            :on-click=" showImageInfo "
            class=" button-info img "
            :style="{ 'background': ` url( http://gallery.dev.webant.ru/api/media_objects/${ photo.image.id } ) ` }"
        />
    </li>
</template>

<script>
import { DxButton } from 'devextreme-vue/button';

export default {
    components: { DxButton },

    props: {
        photo: {
            type: Object,
            required: true,
            default: () => ( {} )
        },
        
        showInfo: {
            type: Function,
            required: true,
            default: () => {}
        }
    },

    methods: {
        showImageInfo() {
            this.showInfo( this.photo );
        }
    } 
}
</script>