如何给封装在组件内的元素的src属性传值

例如：
组件TabBarItem.vue

<template>
  <div>
    <slot>
      <img :src="src" alt="">
      <div>{{title}}</div>
    </slot>
  </div>
</template>
<script>
exportdefault {
  name:'TabBarItem',
  props: {
    title: {
      type:String,
      default:''
    },
    imgSrc: {
      type:String,
      default:''
    }
  }
}
</script>

对于封装在组件内的<img>元素，不但愿将其src硬编码，可将其与组件的props属性imgSrc绑定，而后经过imgSrc传入值。
注意：不能给imgSrc直接赋一个字符串，或一个变量。
缘由：[html-loader]会将<img src="./my-image.png">图像处理并添加到output目录，并且src属性将包含该图像处理后的最终url。可是直接赋一个字符串，或一个变量，值不会作处理，不是图像的最终地址。

有两种实现方式：
1、经过 require() 来引入图片，但要给它一个字符串参数。

<tab-bar-itemtitle="首页" :src="require('assets/img/tabbar/home.svg')" class="tab-bar-item">
</tab-bar-item>

2、将经过import将图片导入后，而后做为data选项的属性值，再绑定给imgSrc。

<tab-bar-itemclass="tab-bar-item"title="homeimg" :imgSrc="homeImg">
import homeImg from'assets/img/tabbar/home.svg'

export default {
  name:'TabBar',
  data () {
    return { 
      homeImg:homeImg
    }
  },
  components: {
    TabBarItem
  }
}

参考webpack：

import MyImage from './my-image.png' 
// 该图像将被处理并添加到`output`目录，而且`MyImage`变量将包含该图像在处理后的最终 url。
// [html-loader]以相同的方式处理`<img src="./my-image.png" />`。
// [css-loader]，CSS中的`url('./my-image.png')`会使用相似的过程去处理。loader会识别这是一个本地文件，并将`'./my-image.png'`路径，替换为`输出`目录中图像的最终路径。