VUE 非原生標籤（img等）標籤src屬性的相對路徑在熱更新時解析錯誤問題的解決(使用bootstrap-vue框架)

在使用bootstrap-vue框架時，bootstrap-vue的自定義組件如<b-img src=''>,<b-card img-src=''>中的相對圖片地址在vue熱更新時被解析成熱更新的根目錄地址下的圖片路徑，即項目目錄下的static目錄下，因此熱更新是圖片將會404。可是以http開頭的地址不受影響。

<template>
    <b-container class="myheader">
        <b-row>
            <b-col>
                <b-card title="Card Title"
                        img-src='./back.jpg'
                        img-alt="Image"
                        img-top
                        tag="article"
                        style="max-width: 100%;"
                        class="mb-2">
                </b-card>
            </b-col>
        </b-row>
    </b-container>
</template>

上圖中的back.jpg將不能在熱更新時正確使用致使404，但在最終的生產環境build編譯中不受影響，能夠正常使用。可是這嚴重影響調試，由於總不能寫一下代碼想預覽就非得編譯並部署一次生產環境代碼吧？太費時間。
解決方案：
圖片屬性綁定到vue的data或者其餘屬性，data屬性中使用require引入圖片
例如：

data(){
            return {
                backimg:require('./back.jpg')
            }

而且全部須要的bootstrap-vue組件必須單獨引入:例如：

import { bContainer, bRow, bCard,bCol } from '../../../node_modules/bootstrap-vue/lib/components'

最終效果：

<template>
    <b-container class="myheader">
        <b-row>
            <b-col>
                <b-card title="Card Title"
                        :img-src='backimg'
                        img-alt="Image"
                        img-top
                        tag="article"
                        style="max-width: 100%;"
                        class="mb-2">
                </b-card>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
    import { bContainer, bRow, bCard,bCol } from '../../../node_modules/bootstrap-vue/lib/components'

    export default {
        name: 'myheader',
        data(){
            return {
                backimg:require('./back.jpg')
            }
        },
        components:{
            bContainer, bRow, bCard,bCol
        }
    }
</script>