require method images not rendered vue js

Question

**The require method images are not rendered with Vuejs. Even though I've add the vue-loader dependency, and the props are delivered correctly. The template is simple - just an array in App component, a Parent and a Child component. Can anyone help ?

https://codesandbox.io/s/eloquent-grass-j1usw8?file=/src/components/v-carousel-item.vue**

// App

<template>
  <v-carousel :carousel_data="sliderItems" />
</template>
<script>
import vCarousel from "./components/v-carousel.vue";
export default {
  name: "App",
  data() {
    return {
      sliderItems: [
        { id: 1, name: "img1", img: "1.jpg" },
        { id: 2, name: "img2", img: "2.jpg" },
        { id: 3, name: "img3", img: "3.jpg" },
      ],
    };
  },
  components: {
    vCarousel,
  },
};
</script>

//Parent

<template>
  <div class="v-carousel"></div>
  <v-carousel-item
    v-for="item in carousel_data"
    :key="item.id"
    :item_data="item"
  />
</template>
<script>
import vCarouselItem from "./v-carousel-item.vue";
export default {
  components: {
    vCarouselItem,
  },
  props: {
    carousel_data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

// Child

<template>
  <div class="v-carousel-item">
    <img src="require('../assets/images' + item_data.img)" alt="" />
  </div>
</template>
<script>
export default {
  props: {
    item_data: {
      type: Object,
      default: () => {},
    },
  },
};
</script>