Tengo dos componentes un padre, este,

 <template> <div class="m-topFooter"> <div class="container"> <iconsTop v-for = "(element,index) in categories" :key = "index" :srcs = "element.img" :text = "element.text" /> </div> </div> </template> <script> import iconsTop from '../atoms/a-icons.vue' export default { name: "topFooter", components: { iconsTop, }, data(){ return { categories: [ { img: "buy-comics-digital-comics.png", text: "digital comics" },

que tienen estos datos. Las categorías son una matriz que contiene objetos con una cadena img para la ruta de la carpeta y un texto. No quiero pasarle a su hijo img y texto. este es el hijo:

 <template> <div class = "a-icons"> <!-- TODO: Insert image dinamically --> <img :src= "require(`@/assets/img/${srcs}`)" alt = "test"> <h5>{{text}}</h5> </div> </template> <script> export default { name: "FooterIcons", props: { srcs: { type: String, required: true, }, text: { type: String, } }

No puedo imprimir el src correcto. ¿Cuál es el problema?