如何为Vuetify的v-img组件添加HTML map？自定义实现方案咨询

Absolutely! Even though Vuetify's official documentation doesn't explicitly cover this use case, you can absolutely connect a v-img component with a standard HTML <map> element. Here's a step-by-step implementation tailored to your code:

Step 1: Adjust the v-img Component #

By default, v-img renders as a <div> container (with the image as a background or nested <img>). To use it with an image map, we need to force it to render as a standard <img> tag using the tag prop, then add the usemap attribute pointing to our map.

Step 2: Add the HTML Map and Areas #

Define your <map> element (with a name matching the usemap value, minus the # prefix) and add <area> tags for each clickable region.

Modified Code Example #

<template>
  <v-container>
    <v-row class="mx-1">
      <v-col cols="12">
        <v-row justify="center">
          <!-- Configure v-img to act as a standard img tag with usemap -->
          <v-img
            contain
            src="/img/home-page.jpg"
            :aspect-ratio="1/2.25"
            max-width="400px"
            max-height="100%"
            tag="img"
            usemap="#homeImageMap"
          ></v-img>

          <!-- Define the image map and clickable areas -->
          <map name="homeImageMap">
            <!-- Example rectangular area - adjust coords to match your image -->
            <area 
              shape="rect" 
              coords="50,50,150,150" 
              href="#feature1" 
              alt="Feature 1"
            >
            <!-- Example circular area -->
            <area 
              shape="circle" 
              coords="250,100,60" 
              href="#feature2" 
              alt="Feature 2"
            >
          </map>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

Key Notes #

• tag="img" is mandatory: Without this, v-img renders as a <div>, which can't use the usemap attribute natively.
• Coordinate accuracy: The coords values in <area> tags are based on the original image dimensions. If your v-img is scaled (via max-width, contain, etc.), you'll need to calculate scaled coordinates (you can use JavaScript to listen for resize events and adjust coords dynamically if needed).
• Alternative approach: If you need more control over responsive click areas, you could also use the @click event on v-img, calculate the mouse position relative to the image, and handle clicks programmatically—but the HTML map method is more straightforward for static regions.

内容的提问来源于stack exchange，提问作者monkeydkon