0

**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>

2
  • 1
    You're missing a : in front of src. E.G :src="require('../assets/images' + item_data.img)" Commented Feb 8, 2023 at 8:18
  • Strange for now I got an error "/src/assets/images/1.jpg: hasn't been transpiled yet" Commented Feb 8, 2023 at 8:40

0