图片没有显示（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文件夹下，修改你的路径看：

图片没有显示（VueJS——使用 v-for）

Images are not showing (VueJS -- using v-for)

src

vuejs2

v-for