Shards Vue



    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.


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

    Basic Example

    <d-img src="" fluid />
    <!-- image-1.vue -->


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

    <d-img fluid thumbnail src="" />
    <!-- image-2.vue -->


    :srcThe image source.StringnullFalse
    :altThe image alternative text.StringnullFalse
    :widthThe image width.Number | StringnullFalse
    :heightThe image height.Number | StringnullFalse
    :fluidWhether the image should be fluid, or not.BooleanfalseFalse
    :fluid-growWhether the image should take up the entire space (in width).BooleanfalseFalse
    :roundedWhether the image should be rounded.BooleanfalseFalse
    :thumbnailWhether the image should be displayed as a thumbnail.BooleanfalseFalse
    :leftWhether the image should be floated to the left.BooleanfalseFalse
    :rightWhether the image should be floated to the right.BooleanfalseFalse
    :centerWhether the image should be centered.BooleanfalseFalse