Question

有什么方法可以将我的v-img映射到普通的html map？

这是我的代码。

<template>
    <v-container>

        <v-row class="mx-1">
            <v-col cols="12">
                <v-row justify="center">
                    <v-img contain src="/img/home-page.jpg" :aspect-ratio="1/2.25" max-width="400px" max-height="100%"></v-img>
                </v-row>
            </v-col>
        </v-row>
    </v-container>
</template>

Vuetify文档中没有任何内容。所以也许有一种自定义的方式来执行此操作？

Answer 1

我找不到一种利用map html标记的方法，因为<v-img>是幕后的div。

我发现可以使用锚点解决此问题（在示例中为黑色使其可见）。

https://jsfiddle.net/ndja5Lsc/26/

Answer 2

因此，由于这里的回答，我找到了答案。

<template>
    <v-container>
        <v-row class="mx-1">
            <v-col cols="12">
                <v-row justify="center">
                    <v-img usemap="" class="image" contain src="/img/home-page.jpg" :aspect-ratio="1/2" max-width="400px" max-height="100%">
                        <router-link tag="a" to="/first"> 
                            <a  style="position:absolute; top: 35%; right: 18%; height:10%; width: 10%;"></a>
                        </router-link>
                    </v-img>

                </v-row>
            </v-col>
        </v-row>
    </v-container>
</template>

我在router-link里面放了v-img，在里面放了a标签。

如何将地图添加到可视化图像

2 个答案: