title: Images are not showing (VueJS -- using v-for)
body: <p>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):
  <a href="https://i.stack.imgur.com/OtFyi.png" rel="nofollow noreferrer">so the images don't show up</a></p>
  
  <p>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):</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;div v-for="data in images" v-bind:key="data"&gt;
      &lt;h2&gt;{{data.Name}}&lt;/h2&gt;
      &lt;a :href="'#'+data.Name"&gt;
        &lt;img :src="'../../../img/products/'+data.Name+'.png'" :alt="data.Name+'.png'" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Prods from '../../../other/jsons/products.json'
    export default {
      data() {
        return {images: Prods}
      }...&lt;/script&gt;
  </code></pre>
  
  <p>Here's the JSON file (it does fetch the data btw, evidently):</p>
  
  <pre><code>[
    {
      "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"
    }
  ]
  </code></pre>
  
  <p>Here's my file structure: <a href="https://i.stack.imgur.com/6F0n3.png" rel="nofollow noreferrer">enter image description here</a></p>