Images in Vue not showing up

Question

I am having trouble displaying images in my Vue CLI project.

Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?

    <template>
  <div>
    <h1 id='callout'>Select Your Eyewear</h1> 
    <div id='item' v-for='item in items' :key=item.id>
      <img :src='`..${item.images.frontal}`' alt='eyeware' />
      <ul id='itemLIist'>     
        <li >
          {{ item.brand }}
        </li>
        <li>
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import items from "../assets/eyewear.json";

export default {
  name: "ItemList",
  data: function() {
    return {
      items: items.eyewear
    };
  }
};
</script>

<style scoped>
</style>

Answer 1

I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)

and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.

and let me know if this works for you. =)