html - その画像座標に基づいて、VueJS/Vuetify で画像を別の画像の上に配置します

Question

私の問題はこれに似ています:その画像座標に基づいて別の画像の上に画像を配置しますが、VueJS と PrimeVue では機能しないようです。

同じことを達成しようとしていますが、複数のタグを使用しています。各領域には、建物、または同様の問題の「椅子」に対応する画像が必要です。建物をクリックできるようにしたいので、背景画像はこのマップを使用してクリック可能な座標を認識しています。

私のコードは次のとおりです。

<div class="map-container">
  <img src="../assets/Map_F.png" alt="city" usemap="#city" />
</div>

<map name="city">
  <area
    class="area"
    shape="rect"
    coords="1049,347,1104,428"
    alt="mainBuilding"
    href="mainBuilding.htm"
  />
</map>

.map-container {
  position: relative;
}

.area {
  position: absolute;
  display: block;
  background-image: url("../assets/building.png");
  background-size: cover;
  background-position: center;
  width: 160px;
  height: 160px;
}

私は本当にあなたの助けに感謝します:D