I have two components a parent, this one,

<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"
                },

that have this data. Categories is an array that contains objects with a string img for the folder path and a text. I wont to pass to his child img and text. This is the son:

<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,
      }
    }

I can't to print the src correct. What's the problem?