大佬教程收集整理的这篇文章主要介绍了我想让我的图像映射在 Vue 项目中具有响应性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在一个使用 Vue.Js 的网站上工作，我需要实现一个图像，用户可以在其中单击某个特定部分，它会向他显示信息。我做了一些研究，发现了图像地图，可以在其中创建带有区域的地图。在每个区域，我会添加一个事件监听器来显示信息。@H_502_1@
<img ID="scheR_984_11845@a" style="wIDth:100%;height:100%" src="../../assets/realisations/drahi.png" alt="drahi" usemap="#image-map"/>
<map name="image-map">
<area target="" alt="network" title="network" href="#" v-on:click="change($event)" coords="190,718,292,665,215,312,190,302,168,314,88,673" shape="poly">
<area target="" alt="batterIE" title="batterIE" href="#" v-on:click="change($event)" coords="581,356,599,381,634,392,666,394,704,386,727,369,734,360,209,724,188,177,680,171,644,618,178,593,581,238" shape="poly">
<area target="" alt="pv" title="pv" href="#" v-on:click="change($event)" coords="756,297,846,378,1212,1123,107" shape="poly">
<area target="" alt="load" title="load" href="#" v-on:click="change($event)" coords="545,791,577,804,659,764,657,675,545,669" shape="poly">
<area target="" alt="car" title="car" href="#" v-on:click="change($event)" coords="568,1033,557,1027,544,1032,532,1026,523,1011,498,995,461,976,439,963,418,966,405,949,397,931,914,401,893,420,877,443,860,462,850,494,834,836,558,587,867,606,885,628,904,646,925,663,944,669,972,654,985,622,1007" shape="poly">
</map>
为了使它具有响应性，我找到了一些插件，例如 image-map, image-map-resizer。但是当我将它导入到我的组件中时，我遇到了一个错误。这就是我在 E4CChart.vue 中导入的方式：@H_502_1@
<script>
import Highcharts from 'highcharts';
import { Chart } from 'highcharts-vue';
import { ImageMap } from "image-map";
</script>
这是错误：@H_502_1@
找不到模块“image-map”的声明文件。
'C:/Users/gerau/OneDrive/Bureau/Stage_LMD_DUT_informatique/FRONTEND/front_end/node_modules/image-map/dist/image-map.Js'
隐式具有“任何”类型。试试npm i --save-dev @types/image-map
如果存在或添加包含 declare module 'image-map';Ve@H_502_1@ 的新声明 (.d.ts) 文件
tur(7016)@H_502_1@
我确实尝试了 npm i ... 命令，但它给了我 404 错误，什么也没找到。@H_502_1@
所以我问你，你知道如何解决我的问题吗？@H_502_1@
PS：这是项目的结构@H_502_1@
我的项目@H_502_1@
由于 image-map 包本身和绝对类型项目 (@types/*) 都没有为此包提供 TypeScript 声明文件，因此您需要在自己的项目中包含一个，以便您的 TypeScript 代码可以用。
幸运的是，该包的 API 似乎相对简单。您可以将以下内容放入新的 src/image-map.d.ts 文件中：
declare module "image-map" {
export default function ImageMap(SELEctor: String,debounce?: number): void;
}
（从技术上讲，该函数返回一个实现该功能的类实例，但我不认为它的成员是公开的，而且您可能无论如何都不需要它们。）
以上是大佬教程为你收集整理的我想让我的图像映射在 Vue 项目中具有响应性全部内容，希望文章能够帮你解决我想让我的图像映射在 Vue 项目中具有响应性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。