图像未显示（VueJS - 使用v-for）

Question

所以我对VueJS很陌生，我一直在用它来创建一个网格状的图库。我尝试使用v-for来显示图像，方法是在JSON文件中循环显示每个图像的信息。我将包括所有这些。但这就是显示的内容（截图）： so the images don't show up

我已经检查了与文件结构相关的链接。所以这里是包含图片库的组件的代码（请注意，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"
  }
]

这是我的文件结构：enter image description here

Answer 1

将您的img文件夹放入/ static文件夹并修改您的路径 看：