Vue img not rendering in v-for list-CodePudding

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/[email protected]',
                  isActive: false
              },
              {
                  id: 2,
                  src: 'https://src/assets/superdash/[email protected]',
                  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>

CodePudding user response：

Try to remove path from method :

new Vue({
  el: '#demo',
  name: 'sidebar',
  data(){
    return{
      links:[
        {id: 0, src: 'https://picsum.photos/200', isActive: false},
        {id: 1, src: 'https://picsum.photos/200', isActive: false},
        {id: 2, src: 'https://picsum.photos/200', isActive: false},
        {id: 3, src: 'https://picsum.photos/200', isActive: false},
        {id: 4, src: 'https://picsum.photos/200', isActive: false}
      ]
    }
  },
  methods:{
    getLinkImage(img){ 
      return (img);
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <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="45px" width="45px"/>
    </div>
  </div>
</div>

CodePudding user response：

I figured it out. For some reason require works directly inside the img component like this using @/assets also works and using a method works too as long as you explicity use the require keyword

<img :src="require(`../assets/superdash/${link.src}.png`)" height="40px" width="40px"/>