在Vue中開發(fā)，展示圖片是經(jīng)常使用到的，如果數(shù)據(jù)是從后臺返回的，需要動態(tài)綁定到img的src中，在vue中直接拼接路徑是不行的，下面結(jié)合案例給與解決方案：

效果

image.png

案例 (包含公共圖片和相對本路徑下的圖片處理)

公共圖片路徑：assets/images/.png
功能模塊圖片路徑：./images/.png

<template>
  <div>
     1.本頁面下面的圖片：<br><br>
        <img src="./images/fj1.png"/> <br><br>
     2.本頁面下面的圖片,動態(tài)循環(huán)插入(圖片中包含require)：<br><br>
        <img v-for="(item, index) in list"  :src="item.src"/><br><br>
     3.本頁面下面的圖片,動態(tài)循環(huán)插入(圖片中只有圖片名稱)：<br><br>
        <img v-for="(item, index) in list2"  :src="item.src | filterImgSrc "/> <br><br>
     4 .引入公共圖片(圖片中只有圖片名稱)：<br><br>
        <img v-for="(item, index) in list3"  :src="imgSrcFun(item.src) "/>
  </div>
</template>
<script>
  export default {
    data(){
      return {
          list: [
            {
              src: require('./images/fj1.png')
            },
            {
              src: require('./images/fj2.png')
            }
          ],
          list2: [
             {
               src: 'fj3.png'
             },
             {
               src: 'fj4.png'
             }
          ],
          list3: [
            {
              src: 'fj2.png'
            },
            {
              src: 'fj4.png'
            }
          ]
      }  
    },
    // 方法
    methods: {
      imgSrcFun(value){
        return require('@/assets/images/'+value);
      }
    },
    // 過濾器
    filters:{
       filterImgSrc(value){
        return require('./images/'+value);
       }
    }
  }
</script>
<style scoped>
  img {
    width: 50px;
    padding-right: 5px;
  }
</style>