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>

• bassxzero: You're missing a : in front of src. E.G :src="require('../assets/images' + item_data.img)"
• user20984971: Strange for now I got an error "/src/assets/images/1.jpg: hasn't been transpiled yet"