Vuetify Nuxt.js : 이미지 태그에 URL 링크를 추가하는 방법

Vuetify Nuxt.js : 이미지 태그에 URL 링크를 추가하는 방법

나는 Nuxt.js와 Vuetifiy에서 처음입니다. 이미지 태그에 URL 링크를 추가하고 싶습니다.이미지를 누르면 다른 페이지 링크가 열립니다.

마이 페이지 레이아웃

url을 지정했습니다.이미지마다 url이 다릅니다.이 url을 이미지에 추가하고 싶습니다.

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

내 코드

    <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" }
              
            ]
          },

포장만 하면 됩니다.

사용하다<nuxt-link />:

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

URL을 에 추가하는 경우slide.images어레이를 동적으로 할당할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/64077307/vuetify-nuxt-js-how-to-add-url-link-in-image-tag