21.Vue img图片路径处理

在Vue中开发，展示图片是经常使用到的，如果数据是从后台返回的，需要动态绑定到img的src中，在vue中直接拼接路径是不行的，下面结合案例给与解决方案：

效果

image.png

案例 (包含公共图片和相对本路径下的图片处理)

公共图片路径：assets/images/.png
功能模块图片路径：./images/.png

<template>
  <div>
     1.本页面下面的图片：<br><br>
        <img src="./images/fj1.png"/> <br><br>
     2.本页面下面的图片,动态循环插入(图片中包含require)：<br><br>
        <img v-for="(item, index) in list"  :src="item.src"/><br><br>
     3.本页面下面的图片,动态循环插入(图片中只有图片名称)：<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>