feat(docs): New reference section wrt project relative urls and image…

… based Bootstrap-Vue components (#1072)

* feat(reference): New section of project relative URLs for src tags on custom components

* Create index.js

* Update README.md

* Update index.js

* Update README.md

* Update README.md

docs/reference/images/README.md

@@ -0,0 +1,53 @@
+# Project relative image URLs for Bootstrap Vue custom components
+
+> vue-loader automatically converts project relative `src` attributes
+on `<img>` tags, but doesn't automatically for Bootrap-Vue custom
+components that accept image src url tags.
+
+## `transformToRequire` option
+To have your project convert these custom component image URLs for you, you will need to
+customize the [`transformToRequire`](https://vue-loader.vuejs.org/en/options.html#transformtorequire)
+`option` for `vue-loader` in your webpack config.
+
+The default value for `transformToRequire` is:
+
+```js
+transformToRequire: {
+  img: 'src',
+  image: 'xlink:href'
+}
+```
+
+To allow Bootstrap-Vue components to use project relative URLs,
+use the following configuration:
+
+```js
+transformToRequire: {
+  img: 'src',
+  image: 'xlink:href',
+  'b-img': 'src',
+  'b-img-lazy': ['src', 'blank-src'],
+  'b-card': 'img-src',
+  'b-card-img': 'img-src',
+  'b-carousel-slide': 'img-src',
+  'b-embed': 'src'
+}
+```
+
+This will allow you to use the following format in your `.vue` files:
+
+```html
+<b-img src="~/static/picture.jpg" />
+
+<b-card-img img-src="~/static/picture.jpg" />
+```
+
+## Using `require`
+If you cannot set the `transforToRequire` in your view-loader config, you
+can alternatively use the `require` method:
+
+```html
+<b-img :src="require('../static/picture.jpg')" />
+
+<b-card-img :img-src="require('../static/picture.jpg')" />
+```

docs/reference/images/index.js

@@ -0,0 +1,8 @@
+import readme from './README.md';
+
+export default {
+    readme,
+    meta: {
+        title: 'Component img src resolving'
+    }
+};

docs/reference/index.js

@@ -4,6 +4,7 @@ export default {
     'variants': require('./variants').default,
     'sizes': require('./sizes').default,
     'spacing': require('./spacing').default,
+    'imgages': require('./images').default,
     'router-links': require('./router-links').default,
     'examples': require('./examples').default
 };