vue.js - 验证 Nuxt.js : how to add url link in image tag

Question

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

Answer 1

只是包装它:

使用 <nuxt-link /> :

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

如果您将网址添加到 slide.images数组，您可以动态分配它们:

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