# Vue Images - Flowbite #### The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations ## Default image Use this example to show the a responsive image that won’t grow beyond the maximum original width. ```vue ``` ## Image caption This example can be used to add a caption for the image often used inside articles. Use `caption-class` to override the cation. ```vue ``` ## Sizes Set the size of the image using the `w-size` and `h-size` or `max-w-size` utility classes from Tailwind CSS to set the width and height of the element. ```vue ``` ## Alignment Align the image component to the center or right side of the document page using `mx-auto` and `ml-auto` margin styles. ```vue ``` ## Grayscale Use the filter option and apply a grayscale to the image element using the grayscale class. ```vue ``` ## Custom classes Use the `img-class` prop to apply tailwind classes. ```vue ```