vuejs2 - 画像が表示されない (VueJS -- v-for を使用)

Question

だから、私は VueJS にかなり慣れていないので、それを使ってグリッドのような画像ギャラリーを作成しています。各画像に関する情報を含む JSON ファイルをループして、v-for を使用して画像を表示しようとしました。私はそれをすべて含めます。しかし、これが表示されるものです（スクリーンショット）： したがって、画像は表示されません

ファイル構造に関連して、リンクを完全にチェックしていません。画像のギャラリーを含むコンポーネントのコードは次のとおりです (注意してください、href リンクは機能します)。

<template>
<div>
  <div v-for="data in images" v-bind:key="data">
    <h2>{{data.Name}}</h2>
    <a :href="'#'+data.Name">
      <img :src="'../../../img/products/'+data.Name+'.png'" :alt="data.Name+'.png'" />
    </a>
  </div>

</div>
</template>

<script>
  import Prods from '../../../other/jsons/products.json'
  export default {
    data() {
      return {images: Prods}
    }...</script>

JSONファイルは次のとおりです（明らかにデータを取得します）：

[
  {
    "ImageId": 0,
    "Name": "drinks"
  },
  {
    "ImageId": 1,
    "Name": "preppedfood"
  },
  {
    "ImageId": 2,
    "Name": "coffee"
  },
  {
    "ImageId": 3,
    "Name": "snacks"
  },
  {
    "ImageId": 4,
    "Name": "nuts"
  },
  {
    "ImageId": 5,
    "Name": "bars"
  },
  {
    "ImageId": 6,
    "Name": "water"
  },
  {
    "ImageId": 7,
    "Name": "fruit"
  },
  {
    "ImageId": 8,
    "Name": "cookies"
  },
  {
    "ImageId": 9,
    "Name": "cereal"
  },
  {
    "ImageId": 10,
    "Name": "healthfood"
  },
  {
    "ImageId": 11,
    "Name": "healthdrinks"
  },
  {
    "ImageId": 12,
    "Name": "waterdispenser"
  },
  {
    "ImageId": 13,
    "Name": "cutlery"
  },
  {
    "ImageId": 14,
    "Name": "office"
  },
  {
    "ImageId": 15,
    "Name": "more"
  }
]

これが私のファイル構造です：ここに画像の説明を入力してください