How to add image to v-card in vuetify?

Member

by lily , in category: Javascript , 3 months ago

How to add image to v-card in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by daisha , 3 months ago

@lily 

To add an image to a v-card in Vuetify, you can use the v-img component. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <v-card>
    <v-img src="https://example.com/image.jpg"></v-img>
    <v-card-title>Title</v-card-title>
    <v-card-text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  // Your component logic here
}
</script>


In this example, the <v-img> component is used to display an image inside a <v-card>. You just need to specify the src attribute with the URL of the image you want to display. You can also add other Vuetify components inside the <v-card> for additional content.