# Image extension

The <us-img> provides convenience features for handling images, including responsive behavior (so they never become larger than their parent elements), and optionally adding lightweight styles to them via props.

Thes image components support rounded images, thumbnail styling, alignment, and even the ability to create blank images with an optional solid background color.

# Responsive Images

Images can be made responsive with the fluid prop (which sets max-width: 100%; height: auto;) so that it scales with the parent element - up to the maximum native width of the image.

You can also allow an image to grow to the maxium width, but no more, using the fluid-grow prop. This may result in blurry images if the image has to scale up too far.

<us-img fluid src="https://picsum.photos/250/250" alt="responsive image"/>
<us-img fluid-grow src="https://picsum.photos/1024/400" alt="responsive image"/>

1
2

# Lazy Loading

You can turn on lazy loading by adding a lazy prop. This will load images in the background and use a blank placeholder image until the image is loaded. The images are only loaded when the <img> component is in the view. This can be a hugh performance gain, so recommended.

If possible, set the width and height to an absolute value so the background image will be the same size as the image when it loads in.

You can modify the color of the place holder image with the blankColor prop, setting it to any valid css color, e.g. blank-color="#8180B2" or blank-color="rgba(120,0,100, 0.5)"

# Thumbnails

You can use prop thumbnail to give an image a rounded light border appearance.

# Background color

# Rounder corners

You can control which corners are rounded by setting the rounded prop to one of the following values:

true (or prop present with no value): round all corners
false (or prop not present): no explicit rounding or corners (default)
top: round the top corners
right: round the right corners
bottom: round the bottom corners
left: round the left corners
circle: make a circle (if square image) or oval (if not square) border
0,1,2 or 3: explicitly set the relative width of rounded corners. 0 removes them.

<div>
    <us-img v-bind="mainProps" rounded alt="Rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="top" alt="Top-rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="right" alt="Right-rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="bottom" alt="Bottom-rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="left" alt="Left-rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="circle" alt="Circle image"></us-img>
    <us-img v-bind="mainProps" rounded="0" alt="Not rounded image"></us-img>
    <us-img v-bind="mainProps" rounded="1" alt="Rounded 1"></us-img>
    <us-img v-bind="mainProps" rounded="2" alt="Rounded 2"></us-img>
    <us-img v-bind="mainProps" rounded="3" alt="Rounded 32"></us-img>
</div>
<script>
export default {
    data() {
        return {
            mainProps: { blank: true, blankColor: '#777', width: '75px', height: '75px', class: 'm1' }
        };
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Component Reference

# `<us-img>`

# Properties

Property	Type	Default	Description
src	string	null	This image source
alt	string	null'	The image alt text
width	string	null	The image width, e.g. '50px'
height	string	null	The image height, e.g. '50px'
fluid	boolean	false	Make image responsive, i.e. max-width of 100%
fluid-grow	boolean	false'	Make image responsive, but grow to maximum width
rounded	boolean	string	false
thumbnaill	boolean	false	Appy styles for thumbnail (set a border)
blank-color	string	'rgba(50,50,50,0.1)'	Set the background color when the image is blank
lazy	boolean	false	Lazy load image

← Card Lists →