Error when outputting img via json?

Question

Vue.js

I get an error when I want to list photos from api
Invalid prop: type check failed for prop "photo". Expected Object, got String with value "5bace356e5e5d387633311.png".
json structure is like this

{
  "totalItems": 588,
  "itemsPerPage": 15,
  "countOfPages": 40,
  "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"
      }
    },
    и еще там фотки
]
}

I display pictures using devextreme popup

<template>
    <div>
        <div class="flex">
            <div class="container-block" id="container">

                <ul class="block"> 
                    <imageItem
                        v-for="( photo, index ) in $store.state.photo "
                        :key=" photo.id "
                        :index=" index "
                        :photo=" photo "
                        :show-info=" showInfo "
                        class=" img "
                    /> 
                </ul>

                <DxPopup
                    :visible.sync=" popupVisible "
                    :drag-enabled=" false "
                    :close-on-outside-click=" true "
                    :width=" 730 "
                    :height=" 685 "
                    class=" popup "
                >
                    <img :src=" currentPhoto " alt="">
                </DxPopup>

            </div>
        </div>
    </div>
</template>

<script>
import { DxPopup } from 'devextreme-vue/popup';
import imageItem from './imageItem'
export default {
    data() {
        return {    
            currentPhoto: {},
            popupVisible: false
        }
    }, 
    methods: {
        showInfo( photo ) {
            this.currentPhoto = photo;
            this.popupVisible = true;
        },
    },    
    components: { DxPopup, imageItem },
}
</script>

his child

<template>
    <li>
        <DxButton
            :on-click=" showImageInfo "
            class=" button-info img "
            :style="{ 'background': 'url(' + photo + ')' }"
        />
    </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>

and the Vuex repository itself

export default new Vuex.Store( {
  state: { 
    photo: [],
    perPage: 15,
    page: 1,
    total: 0,
    loading: false,
  },
  getters: {
    numPages: state => Math.ceil( state.total / state.perPage ),
  },
  mutations: {
    updateLoading: ( state, loading ) => state.loading = loading,
    updatePosts: ( state, { photo, total, page } ) => Object.assign( state, { photo, total, page } ),
  },
  actions: {
    async fetchPosts( { commit }, page ) {
      commit('updateLoading', true)

      // const start = ( page - 1 ) * state.perPage;
      // const end = page * state.perPage;
      const url = `/api/photos?limit=15`
      const photo = []

      try {
        const response = await fetch( url )
        const res = await response.json()

        for( let i = 0; i < res.data.length; i++ ) {
          photo.push( res.data[i].image.contentUrl )
        }

        const total = res.totalItems
        commit( 'updatePosts', { photo, total, page }) 
      } catch (e) {
        console.error(e)
      }

      commit( 'updateLoading', false )
    },
  }
} )

thanks in advance ; )

Answer 1

:style="{ 'background': 'url(' + photo.contentUrl + ')' }"