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

Question

So I'm pretty new to VueJS and I've been using it to create a gridlike image gallery. I tried to use v-for to display the images by looping through a JSON file with information about each image. I'll include all that. But this is what shows up (screenshot):
so the images don't show up
I've nonuple-checked the links in relation to the file structure. So here's the code of the component that contains the gallery of images (mind you, the href links DO work):
<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>
Here's the JSON file (it does fetch the data btw, evidently):
[
{
"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"
}
]
Here's my file structure: enter image description here

Answer 1

put your img folder into /static folder and modify your path
see :