So I have an array of image paths that I retrieve from rest API and i'm trying to display them using a v-for loop this is the code of the page that displays them

<template>
  <v-app>

    <app-navbar />

    <v-main>
        <h3>test {{$route.params.name}}, {{$route.query.status}},{{$route.query.tag}}</h3>
        <h3>{{imagesref}}</h3>
        <ul id="example-1">
      <li v-for="item in imagesref" :key="item">
        {{item}}
      </li>
      </ul>
      
  
    </v-main>
  </v-app>
</template>

<script>
import appNavbar from '../../../components/appNavbar.vue';
import axios from "axios";
export default {
  components : {appNavbar},
  name: "App",
  data() {
    return {
      items: [],
      imagesref: [],
          };
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3004/tests`,{ params: {name:this.$route.params.name} });
      this.items = res.data;
      this.imagesref=res.data[0].refimages;
      
    } catch (error) {
      console.log(error);
    }
  },

};
</script>

<style lang="scss" scoped>

</style>

the images are inside the assets folder like this

/assets
  /captures
     /test_..
        /@DHRD_..
           /testname
              /1.png

the path of the images are retrieved as an array with each element being a path to an image like this

projectname/assets/captures/test../@DHRD../testname/1.png

How can I display all the images