虚拟Nuxt.js :如何在图像标签中添加url链接
虚拟Nuxt.js :如何在图像标签中添加url链接
提问于 2020-09-26 11:46:38
我是新的Nuxt.js和武帝，我想在图片标签中添加网址链接。如果我按下图像，它应该会打开其他页面链接。
我的页面布局
我已经指定了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" }
]
},回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-06 21:48:01
把它包起来：
使用<nuxt-link />
<nuxt-link to="#">
<v-img :src="images.src" width="30"/>
</nuxt-link>如果将urls添加到slide.images数组中，则可以动态分配它们：
<nuxt-link :to="images.url">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64077307
复制相关文章
相似问题
腾讯云开发者
