画像のv-bindができない

Question

下記のコードのimageタグで、worksのskillsの１つ目の画像をバインディングさせたいです。

しかし現在moduleエラーが出ています。
どのようにimageタグの中を書き換えたら良いでしょうか？

 <ul class="works__list">
      <li v-for="(work, i) in works" class="works__item" @click="changeWork(i)">
        <h2>{{ work.title }}</h2>
        <img :src="require(`@/assets/work.skils[0]`)"> //該当箇所
      </li>
    </ul>

全体的なコードは以下です

<template>
  <div class="works">
    <div class="main">
      <h1 class="main__title">{{ works[workIndex].title }}</h1>
      <p class="main__description">{{ works[workIndex].description }}</p>
      <ul class="main__skillList">
        <li v-for="skill in works[workIndex].skills" class="main__skillItem">
          <img :src="require(`@/assets/${skill}`)">
        </li>
      </ul>
    </div>
    <ul class="works__list">
      <li v-for="(work, i) in works" class="works__item" @click="changeWork(i)">
        <h2>{{ work.title }}</h2>
        <img :src="require(`@/assets/work.skils[0]`)"> //該当箇所
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      workIndex: 0,
      works: [
        {
          title: 'My Favorite Music',
          description: '好きな音楽を紹介できるプロフィールサービス。ログイン、投稿、編集、削除、セッションを切ったシェアページ等',
          skills: ['mfm_1.png', 'mfm_2.png']
        },
        {
          title: 'シェアパレ',
          description: '一人一人が別々の一パーツしか見えない状態で着色し、一枚の塗り絵を完成させるサービス。',
          skills: ['share1.png', 'share2.png']
        },
        {
          title: 'ラーメン君の修行',
          description: '南大沢地区のラーメン屋紹介をノベルゲーム風に',
          skills: ['ramen1.png', 'ramen2.png']
        }
      ]
    }
  },
  methods: {
    changeWork (i){
      this.workIndex = i
    }
  }
}

エラー画面は以下です

Answer 1

<img :src="require(`@/assets/${work.skils[0]}`)"> 

変数をパスの中で使ってるなら、このように、${変数}ではないでしょうか？

<img :src="require(`@/assets/${skill}`)">

上記部分ではエラーが発生してないのですよね？

Comments

[Manamin]

ご回答ありがとうございます。しかしそのようにするなぜか何も表示されず真っ白な画面になります

[HayatoKamono]

<img :src="require(`@/assets/work.skils[0]`)"> //該当箇所
↑
skillsのスペルが間違ってますが、そこも要修正ですね。lが１つ足りてないです。

[Manamin]

まさかスペルミスだとは、、、！できました！ありがとうございました！