Vuetify Nuxt.js：如何在图像标签中添加 url 链接

Question

我是 Nuxt.js 和 Vuetfiy 的新手，我想在图像标签中添加 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" }
              
            ]
          },

Answer 1

把它包起来：

使用<nuxt-link />:

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

如果将 url 添加到 slide.images 数组中，则可以动态分配它们：

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