vuetensils
Version:
A 'naked' component library for building accessible, lightweight, on-brand applications.
132 lines (108 loc) • 2.25 kB
Markdown
**NOTE: It's best to preview these on a slow/throttled connection**
```vue
<template>
<VImg src="https://source.unsplash.com/random/900x600" />
</template>
<script>
export default {};
</script>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
```
Pass in the image dimensions to avoid the page jumping when the image loads
```vue
<template>
<VImg
src="https://source.unsplash.com/random/900x550"
width="900"
height="550"
/>
</template>
<script>
export default {};
</script>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
```
### Colored Placeholder
```vue
<template>
<VImg
src="https://source.unsplash.com/random/1000x550"
width="1000"
height="550"
background="#ddd"
/>
</template>
<script>
export default {};
</script>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
```
### Blurred Thumbnail Placeholder
```vue
<template>
<VImg
src="https://images.unsplash.com/photo-1546094324-7fd2718befe3?w=1080"
width="1080"
height="864"
placeholder="https://images.unsplash.com/photo-1546094324-7fd2718befe3?w=30"
/>
</template>
<script>
export default {};
</script>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
```
### Misc
Don't forget all the other best practices such as `srcset` attribute and `alt` text
```vue
<template>
<VImg
:src="`https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=1080`"
width="900"
height="600"
placeholder="https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=30"
srcset="https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=320 320w,
https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=480 480w,
https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=800 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
(max-width: 800px) 760px,
1080px"
alt="Beautiful forest"
/>
</template>
<script>
export default {};
</script>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
```
### Custom Classes
This component can accept a `classes` prop to customize the output HTML classes:
```
:classes="{ root: 'root-class', placeholder: 'placeholder-class', img: 'img-class' }"
```