Images

The <d-image> component provides an easy way of adding responsive behavior to your images. Other than this, the component also provides easy-to-use handles for thumbnail styling, alignment and rounded images.

Alias

The <d-image> component is also available as <d-img>.

Basic Example


<d-img src="https://placeimg.com/640/380/any" fluid />

<!-- image-1.vue -->

Thumbnails

Using the thumbnail prop you can turn your images into thumbnails.


<d-img fluid thumbnail src="https://placeimg.com/200/200/any" />

<!-- image-2.vue -->

Props

Prop	Description	Type	Default	Required
:src	The image source.	`String`	null	False
:alt	The image alternative text.	`String`	null	False
:width	The image width.	`Number \| String`	null	False
:height	The image height.	`Number \| String`	null	False
:fluid	Whether the image should be fluid, or not.	`Boolean`	false	False
:fluid-grow	Whether the image should take up the entire space (in width).	`Boolean`	false	False
:rounded	Whether the image should be rounded.	`Boolean`	false	False
:thumbnail	Whether the image should be displayed as a thumbnail.	`Boolean`	false	False
:left	Whether the image should be floated to the left.	`Boolean`	false	False
:right	Whether the image should be floated to the right.	`Boolean`	false	False
:center	Whether the image should be centered.	`Boolean`	false	False