VUE中使用BootstrapVue图片b-img标签只能使用绝对路径问题

前端时间一直在使用vue写前端，由于太忙并没有时间去总结。

情况如下：

项目使用的element-ui，但我认为美观度不够再加上我对bootstrap情有独钟，所以毅然决然使用了bootstrap

在搜vue如何引入bootstrap的时候，碰巧发现bootstrap也发行了BootstrapVue，这更加酸甜加凉爽了。

使用情况：

由于是在过各个组件，于是就用了BootstrapVue中下面的标签

<b-img src="#"></b-img>

使用过程中发现，该标签的src属性，只支持http路径的网址。也就是说我们如果把想展示的图片放在某自定义文件夹下是展示不出来的

正常情况下vue展示图片路径格式如下

<img src="~@/assets/img/finsh_ok_ico.png" />

而bootstrapvue的<b-img></b-img>标签默认是不支持这种格式的，那么我们想使用这种格式的时候该怎么办呢？

bootstrapvue研发人员不可能想不到这个问题，所以官方提供了参考文档

https://bootstrap-vue.js.org/docs/reference/images

解决方式如下：

一、查看vue-cli版本

如果你的版本是3.0+那么你需要使用官方文档中Vue CLI 3的支持（本文只说3.0以前）

二、更改vue加载配置文件

打开vue工程目录

找到vue-loader.config.js的transformToRequire对象添加红色圈中部分内容

（提示：你应该发现了坑的点.官方文档让我们找的是transformAssetUrls，而我们这里配置的是transformToRequire，这是因为官方是针对最新的vue-cli来说的,我当时找了好久...这很正常!）

ok，做完上面配置就可以支持相对路径写法了并且下面这两个标签都支持

<b-img src="~/static/picture.jpg"></b-img>

<b-card-img src="~/static/picture.jpg"></b-card-img>

附一张成功的截图