如何給封裝在組件內的元素的src屬性傳值

例如：
組件TabBarItem.vuecss

<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。可是直接賦一個字符串，或一個變量，值不會作處理，不是圖像的最終地址。 html

有兩種實現方式：
1、經過 require() 來引入圖片，但要給它一個字符串參數。vue

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

2、將經過import將圖片導入後，而後做爲data選項的屬性值，再綁定給imgSrc。webpack

<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：web

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'`路徑，替換爲`輸出`目錄中圖像的最終路徑。