Question

我是Nuxt.js和Vuetifiy的新手，我想在图片标签中添加网址链接。如果我按图片，则应该打开其他页面链接

我的页面布局

我已为每个图片指定了网址，就像我想将此网址添加到图片一样

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">

Vuetify Nuxt.js：如何在图片标签中添加网址链接

1 个答案: