How to fix broken image link reading from JSON using Vue js

I am trying to obtain image assigned to image_path on a JSON file. It is supposed to display the image according to the filter button of category selected by user. User should click on a category and the images from that category should be displayed but I am getting a broken image like if it is not reaching the image path.

portfolio-v1.json

{
  "data":[
    {
      "image_path":"static/products/DELUXE-BATHROBE.jpg",
      "title":"Beautiful Designs",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor":"George Courey",
      "space": "Bathroom",
      "category":"Bathrobes & Slippers"
    },
    {
      "image_path":"static/products/HOME-CARE-SLIP-PAD.png",
      "title":"Mutifunctionals Blocks",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "space": "Apparel",
      "category": "Protective Products"
    },
    {
      "image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
      "title":"Vuejs App For Game",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "space": "Bathroom",
      "category": "Blanket"
    }
  ]
}

PortfolioGrid.vue

<template>
  <div class="row col-space">
    <!-- START PORTFOLIO FILTER AREA -->
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="text-center">
        <div >
          <button class="active btn" @click="filter = ''">Show all</button>
          <button class="btn" @click="filter = 'Linen'">Linens</button>
          <button class="btn" @click="filter = 'Blanket'">Blankets</button>
          <button class="btn" @click="filter = 'Protective Products'">Protective Products</button>
          <button class="btn" @click="filter = 'Top Sheets'">Top Sheets</button>
          <button class="btn" @click="filter = 'Staff Apparel'">Staff Apparel</button>
          <button class="btn" @click="filter = 'Towels'">Towels</button>
          <button class="btn" @click="filter = 'Bathrobes & Slippers'">Bathrobes & Slippers</button>
        </div>
      </div>
    </div>
    <!-- END PORTFOLIO FILTER AREA -->
    <div v-for="(p, index) of portfolio.slice(0,showNoOfPosts)" :key="index"
         class="col-sm-12 col-md-6 col-lg-4 ">
      <div class="overlay-wrap">
        <img :src="portfolio.image_path" alt="gallery images" class="img-fluid border-rad w-100" height="500"
             width="500"/>
        <a :href="portfolio.image_path" class="card-img-overlay primary-tp-layer pos-center text-center"
           data-fancybox="images">
                    <span class="center-holder">
                        <a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
                            <i class="fa fa-plus align-middle"></i>
                        </a>
                    </span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import portfoliov1 from 'Components/data/portfolio-v1.json'

export default {
  props: ['showNoOfPosts'],
  data() {
    return {
      portfoliov1,
      filter: "",
    }
  },
  computed: {
    portfolio() {
      if (!this.filter) {
        return this.portfoliov1.data;
      }
      return this.portfoliov1.data.filter(p => p.category === this.filter);
    }
  }
}
</script>

json file is inside data folder, images are inside products and current due file is PortfolioGrid.vue