Vue如何動態配置img標簽的圖片源src

　　（一）首先通過綁定數據給src提供圖片地址

<template>
    <div>
        <img :src=image_path />
    </div>
</template>

<script>
export default {
   data() {
        return {
              image_path: "../assets/imgs/hello.png" // 我這里是根據圖片在源碼中的路徑來確定的，需要依據具體的情況來賦值
       }
   }
}
</script>

　　（二）通過配置文件來配置圖片路徑

　　假設在根目錄下有個static目錄，在該目錄下有個img文件夾，在該文件夾下有個hello.png文件，即static/img/hello.png

　　同時在static/js/目錄下建立一個配置文件，如：config.js文件，即static/js/config.js，其內容如下：

'use strict'

module.exports = {
     IMAGE_PATH: '/static/img/hello.png',  
}

　　(三)在webpack.base.conf.js文件中保持圖片名稱不變

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[ext]')
        }
 }

　　（四）在Vue文件中應用配置文件

        const configConstants = require('static/js/config.js')

        此時可以給image_path這樣賦值：configConstants.IMAGE_PATH

 

 

 

------勉