Vue.js iterating over image src

Question

Trying to iterate over a list of (imagePath, href) & display them with vue.js.

The href value of the images work, the link opens on click. Though the images aren't showing.

My code is as follows:

            <div
              v-for="(image,index) in socials"
              :key="index"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="image.src" 
                    />

                  </v-avatar>
                </a>

            </div>

  export default {
    name: 'App',

    data: () => ({
      socials: [
        {
          id:"1",
          src:"../assets/socials/discord.png",
          href:"https://discord.gg/link_to_discord"
        },
        {
          id:"2",
          src:"../assets/socials/telegram.png",
          href:"https://t.me//link_to_telegram"
        },
        {
          id:"3",
          src:"../assets/socials/medium.png",
          href:"https://medium.com/@link_to_medium"
        }
      ],

    })
  

  };

The images are named correctly and are in the correct dir. How can I change my code so that the images are shown properly ?
This code belongs to a footer, so the template & js is in App.vue

SOLUTION

Thanks to @Nikola and this question, I was able to solve it via getImgUrl method. Here's the updated code:

template

            <div
              v-for="image in socials"
              :key="image.id"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="getImgUrl(image.src)" 
                    />

                  </v-avatar>
                </a>

            </div>

script

<script>

  export default {
    name: 'App',

    data: function() {

      return {
        socials: [
          {
            id:"1",
            src:"socials/discord.png",
            href:"https://discord.gg/link_to_discord"
          },
          {
            id:"2",
            src:"socials/telegram.png",
            href:"https://t.me//link_to_telegram"
          },
          {
            id:"3",
            src:"socials/medium.png",
            href:"https://medium.com/@link_to_medium"
          }
        ],
      };
    },

    methods:{
      getImgUrl: function (path) { 
        return require('@/assets/' + path);
      }
    }
  

  };
  
</script>

Answer 1

You can make method:

export default {
    name: 'App',

    data: () => ({
      socials: [
        {
          id:"1",
          src:"socials/discord.png",
          href:"https://discord.gg/link_to_discord"
        },
        {
          id:"2",
          src:"socials/telegram.png",
          href:"https://t.me//link_to_telegram"
        },
        {
          id:"3",
          src:"socials/medium.png",
          href:"https://medium.com/@link_to_medium"
        }
      ],

    }),
    methods: {
      getImgUrl: function (path) { 
         return require('@/assets/' + path);
      }
    }

  };

Then in template call that method:

            <div
              v-for="(image,index) in socials"
              :key="index"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="getImgUrl(image.src)" 
                    />

                  </v-avatar>
                </a>

            </div>