javascript - Vue img 未在 v-for 列表中呈现

Question

我有一个要列出的对象数组，但是当我渲染图像 src 时，图像是空白的。我已经确认图像本身的路径是正确的，但我无法让它们显示

我正在关注https://codesource.io/rendering-lists-in-vue/作为教程，据说将其指定为 url，我尝试使用 https 和 http 作为 localhost 但图像仍然是空白

最后，我尝试使用函数手动 src 图像，但出现同样的问题，组件很小，所以我将它包含在这里

希望有人对我接下来可以尝试的内容提出建议:)

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

标签： javascriptlistvue.jsrendering

Answer 1

尝试从方法中删除路径：

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>