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>