CODEWITHSUNDEEP
vue.jsvuejs2vue-componentnuxt.jsvuetify.js
user12380208
user12380208

Reputation: 531

Vuetify Nuxt.js : how to add url link in image tag

i am new in Nuxt.js and Vuetifiy i want to add url link in image tag. if i press image it should open other page link

my page layout

enter image description here i have specified urls each image have different url like i want to add this url to image

to="/AppMain/Support/Support" 
and
 to="/UserDash/Profile" 
also
 to="/AppMain/Entertainment"
 how to add this urls in image

my code

    <template>
      <v-layout style="width: auto;" class="ma-auto">
        <v-carousel cycle light height="309" hide-delimiter-background show-arrows-on-hover>
          <v-carousel-item v-for="(slide, i) in slides" :key="i">
            <v-row>
              <v-col cols="3" v-for="(images, j) in slide.images" :key="j">
                <div class="d-flex flex-column justify-center align-center">
                  <v-img :src="images.src" width="30"/>
                  <span class="mx-auto text-center caption">{{ images.caption }}</span>
                </div>
              </v-col>
            </v-row>
          </v-carousel-item>
        </v-carousel>
      </v-layout>
    </template>
    
    <script>
    export default {
      name: "playground",
      data: () => ({
        slides: [
          {
            images: [
              { src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_allcategories.svg", caption: "All Categories"},
              { src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_b2b.svg", caption: "B2B" },
              { src: "https://akam.cdn.jdmagicbox.com/images/icontent/newwap/newprotmore/hkm_shopping.svg", caption: "Shopping" }
              
            ]
          },

Upvotes: 3

Views: 2071

Answers (1)

Avraham
Avraham

Reputation: 968

Just wrap it:

Use <nuxt-link />:

<nuxt-link to="#">
  <v-img :src="images.src" width="30"/>
</nuxt-link>

If you add the urls to the slide.images array, you can dynamically assign them:

<nuxt-link :to="images.url">

Upvotes: 1

Related Questions