I have an array of objects I'm listing out but when I render the image src the image is blank. I have confirmed that the paths to the images themselves are correct but I can't get them to show

I'm following https://codesource.io/rendering-lists-in-vue/ as a tutorial where is says to specify it as a url, I've tried using https and http for localhost but the images are still blank

lastly I've tried using a function to manually src the images but the same issue occurs, the component is small so I've included it here

hoping someone has a suggestion for what I can try next :)

<template>
  <div id="sideBarDiv">
      
        <img src="../assets/Icon_3.png" height="40px" width="40px"/>   
        <div v-for="link in links" :key="link.id">
            <p>.</p> <img v-bind:src="link.src" height="15px" width="15px"/>
        </div>
   
    </div>
    
</template>

<script>


export default {
  name: 'sidebar',
  data: function(){
      return{
          links:[
              {
                  id: 0,
                  src: 'https://src/assets/superdash/ic_active-2.png',
                  isActive: false
              },
               {
                  id: 1,
                  src: 'https://src/assets/superdash/ic_active@2x.png',
                  isActive: false
              },
              {
                  id: 2,
                  src: 'https://src/assets/superdash/ic_active-1@2x.png',
                  isActive: false
              },
              {
                  id: 3,
                  src: 'https://src/assets/superdash/ic_active-3.png',
                  isActive: false
              },
              {
                  id: 4,
                  src: 'https://src/assets/superdash/ic_active-4.png',
                  isActive: false
              }
          ]
      }
  },
  methods:{
       getLinkImage(img){ 
          return ('@/assets/superdash/'+img+'.png'); //attempt to plugin image name and combine with known path to render
      },
    
  }
 
}
</script>