VUE 非原生标签（img等）标签src属性的相对路径在热更新时解析错误问题的解决(使用bootstrap-vue框架)

在使用bootstrap-vue框架时，bootstrap-vue的自定义组件如,中的相对图片地址在vue热更新时被解析成热更新的根目录地址下的图片路径，即项目目录下的static目录下，所以热更新是图片将会404。但是以http开头的地址不受影响。

上图中的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'

最终效果：