Fetching image using django-graphql-vuejs apollo

Question

I was wondering how to fetch and/or upload image on django and graphene using vuejs? I can fetch the bookName, author and price however, I'm unable to query bookImage. Please visit the console log below. I also uploaded the code that might help you see my faults. Thanks in advance.

enter image description here

main.js

import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client'
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  link: createUploadLink({ uri: 'http://127.0.0.1:8000/graphql/' }),
  cache: new InMemoryCache()
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <div v-for="book in books" :key="book.id">
        <h1>{{book.bookName}}</h1>
        <div class="etcard">
          <img :src="book.bookImage" alt="">
        </div>
    </div>
  </div>
</template>

<script>
import BOOKS from './graphql/books'

export default {
  name: 'App',

  apollo: {
    books: BOOKS
  }
 
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

books.js

import gql from 'graphql-tag'

export default gql`query books {
    books {
      bookName
      author
      price
      bookImage
    }
  }`