Can't load image ( carousels ) in Vue.js

this is my code :

<template>
  <div class="heroBlock">
    <v-carousel hide-delimiters height="400px" cycle>
      <v-carousel-item
          v-for="(item,i) in items"
          :key="i"
          :src="item.src"
          reverse-transition="fade-transition"
          transition="fade-transition"
      ></v-carousel-item>
    </v-carousel>
  </div>



</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          src: require("../test/src/assets/images/carousel1.jpg"),
        },
        {
          src: require("../test/src/assets/images/carousel1.jpg") ,
        },
        {
          src: require("../test/src/assets/images/carousel1.jpg"),
        },
        {
          src: require("../test/src/assets/images/carousel1.jpg"),
        },
      ],
    }
  },
}
</script>

<style scoped>
<

but give me this error

ERROR Failed to compile with 1 errors 1:30:58 PM

This relative module was not found:

• ../test/src/assets/images/carousel1.jpg in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modu les/vue-loader/lib??vue-loader-options!./src/components/Routes/Navbar/Home/NewHome.vue?vue&type=script&lang=js&

but if i enter this part give me no error:

            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',

what's the problem??