Permalink
Browse files

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
  • Loading branch information...
tmorehouse committed Sep 17, 2017
1 parent 6f87c23 commit 7809fb245331b01277d8464b4f35f7d0cde3e896
Showing with 62 additions and 0 deletions.
  1. +53 −0 docs/reference/images/README.md
  2. +8 −0 docs/reference/images/index.js
  3. +1 −0 docs/reference/index.js
@@ -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')" />
```
@@ -0,0 +1,8 @@
import readme from './README.md';
export default {
readme,
meta: {
title: 'Component img src resolving'
}
};
@@ -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
};

0 comments on commit 7809fb2

Please sign in to comment.