Skip to content

Commit f716c17

Browse files
committed
Updated README. Asset URL Handling
1 parent 86e1c09 commit f716c17

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,36 @@ In case of a loading error of the main image, it is possible to add a fallback i
162162
/>
163163
```
164164

165+
## Vue Loader - Asset URL Handling
166+
167+
If you're using Vue Loader, it's Asset URL transforms will not work with our `lazy-img` and `lazy-background` elements by default.
168+
169+
By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](https://vue-loader.vuejs.org/options.html#transformasseturls) option:
170+
171+
```js
172+
{
173+
video: ['src', 'poster'],
174+
source: 'src',
175+
img: 'src',
176+
image: 'xlink:href'
177+
}
178+
```
179+
180+
All you have to is to add our `lazy-img` and `lazy-background` tags to the `transformAssetUrls` object:
181+
182+
```js
183+
{
184+
video: ['src', 'poster'],
185+
source: 'src',
186+
img: 'src',
187+
image: 'xlink:href',
188+
'lazy-img': 'src',
189+
'lazy-background': 'src'
190+
}
191+
```
192+
193+
Now, Vue Loader's Asset URL transforms will work with our elements too.
194+
165195
## Events
166196

167197
Each component emits an event whenever an image is loaded.

0 commit comments

Comments
 (0)