Image

Component name: <v-image-group> + <v-image>

Examples

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat.
<div class="app">
  <v-image-group>
    <v-image src="http://lorempixel.com/1280/720/?image=1" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=2" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=3" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=4" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=5" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=6" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=7" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=8" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=9" alt="Lorem ipsum"></v-image>
    <v-image src="http://lorempixel.com/1280/720/?image=10" alt="Lorem ipsum"></v-image>
    <template v-slot:description>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat.
    </template>
  </v-image-group>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Components

v-image-group

Wrapper component for images.

API

Name Type Description Default
slot: description Slot Shows the following description

v-image

API

Name Type Description Default
src String Image source.

Valid value: Image URL
-
alt String Alternate text -

Notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.