由外部json文件，按照配置方式引入图片路径时，需要一些值得注意的语法来动态引入和改变图片
1、图片路径设置 ，按照img标签动态引入图片
<img src=‘‘/>
- 路径不引入变量，此时的@路径代表src文件夹，后面的部分可以按需修改，vue工程的引入路径方法
<img src="@/assets/logo.png"/>
- HTML图片路径中有变量，由vue模板语法产生，如v-for引入的item。需要引入requeire语法
<img :src="require(‘@/path/‘+item[‘icon‘])" width="100%" height="100%" :title="item[‘label‘]" alt=‘‘/>
2、在动态引入非svg图片后，需要设置hover状态和正常状态不同的路径，例如俩不同颜色的图片，本例一中为高度和宽度
- 在vue模板中使用动态变量从style中引入以被定义好的变量，再使用var变量在css中指定（会引入超多变量)
<div :style="{ ‘--Width‘: xxWidth, ‘--Height‘: xxHeight }"></div>
.map-swiper { height: var(--Height); width: var(--Width); }
另外一种比较好的方法是，在原div中同时引入俩img，不同路径。每个图片配不同的class，在hover时改变display来设置是否显示。
display:block;
display:none;
3、使用svg图片，作为Img的src文件引用，在hover时设置阴影来改变颜色。用src引入svg的情况下不适合改变svg的fill属性
思路为将图片先向右偏移到视线之外，再设置其偏移阴影正好投影到原位置。
<img src="@/xx/yy.svg" width="100%" height="100%" alt=‘‘/>
#parentcss:hover{ img{ position: relative; left: 5000px; filter: drop-shadow(darkcyan -5000px 0); } }