Contentfulのcontentに紐づくimageをvueで表示することができません。Error：Cannot read property 'fields' of undefined

Contentfulで記事を作成し、vueで取得したいのですが、記事に紐づく画像が取得できません...

Error：Cannot read property 'fields' of undefined

※techpitの教材です。（製作者に問い合わせしていますが連絡がないため、こちらにも投稿します。）
該当ページ：https://www.techpit.jp/courses/28/curriculums/29/sections/249/parts/855

▼エラーが出てしまうコード

Html
1<div 
2    class="mb-3 w-full h-64 bg-center bg-cover"
3    :style=" 'background-image: url(' + work.fields.image.fields.file.url + ')' "
4>
5</div>

▼コード全体

vue
1<!-- pages/index.vue -->
2
3<template>
4  <div>
5    <div 
6      v-for="work in works"
7      :key="work.sys.id"
8      class="w-full m-2 pb-3 bg-white overflow-hidden shadow-lg"
9    >
10      <div class="absolute bg-white py-1 px-3 rounded shadow mt-1 ml-1 text-sm">
11        {{ work.fields.category.fields.name }}
12      </div>
13      <div 
14        class="mb-3 w-full h-64 bg-center bg-cover"
15        :style=" 'background-image: url(' + work.fields.image.fields.file.url + ')' "
16      ></div>
17      <h3 class="ml-3 font-bold">{{ work.fields.title }}</h3>
18      <h4 class="ml-3 my-2 text-xs">{{ work.fields.subtitle }}</h4>
19      <div class="flex ml-2">
20        <li 
21          v-for="tag in work.fields.tag"
22          :key="tag.sys.id"
23          class="list-none text-xs m-1 bg-gray-200 p-1 rounded"
24        >
25          {{ tag.fields.name }}
26        </li>
27      </div>
28    </div>
29  </div>
30</template>
31
32<script>
33import { createClient } from '~/plugins/contentful.js'
34const client = createClient()
35export default {
36  asyncData() {
37    return Promise.all([
38      client.getEntries({
39        content_type: 'work', // workタイプの記事データを全取得
40        order: '-sys.createdAt', // 作成日時順に並べる
41      }),
42    ])
43      .then(([works]) => {
44        console.log(works.items)
45        return {
46          works: works.items, // 取得したデータを配列worksに入れる
47        }
48      })
49      .catch(console.error)
50  },
51}
52</script>

▼console.log(works.items)　の中身

[                                                                                                            21:26:43
  {
    sys: {
      space: [Object],
      id: '4GGdVzFpAP9wYcZujWql7f',
      type: 'Entry',
      createdAt: '2020-08-20T13:53:41.300Z',
      updatedAt: '2020-08-20T13:53:41.300Z',
      environment: [Object],
      revision: 1,
      contentType: [Object],
      locale: 'en-US'
    },
    fields: {
      title: 'アイス',
      subTitle: 'チョコモナカジャンボ',
      date: '2020-08-05T00:00+09:00',
      category: [Object],
      tag: [Array],
      content: '美味しい！'
    }
  },
  {
    sys: {
      space: [Object],
      id: '61SVTRr1VpZbkFX8bdi4P3',
      type: 'Entry',
      createdAt: '2020-08-20T13:51:50.745Z',
      updatedAt: '2020-08-20T13:51:50.745Z',
      environment: [Object],
      revision: 1,
      contentType: [Object],
      locale: 'en-US'
    },
    fields: {
      title: 'パン',
      subTitle: 'メロンパン',
      category: [Object],
      content: '猛禽類研究所'
    }
  },
  {
    sys: {
      space: [Object],
      id: '37g2gRzX3Vtcn4uU456vJM',
      type: 'Entry',
      createdAt: '2020-08-20T13:37:33.876Z',
      updatedAt: '2020-08-20T13:40:53.794Z',
      environment: [Object],
      revision: 2,
      contentType: [Object],
      locale: 'en-US'
    },
    fields: {
      title: '文鳥',
      subTitle: '白文鳥',
      date: '2020-08-19T00:00+09:00',
      category: [Object],
      tag: [Array],
      content: '白文鳥、かわいい！\n'
    }
  }
]