<div>
<img class="index-icon-img"
:src="require(`@/assets/home/${active ? activeImg : inactiveImg}.png`)" />
</div>
<div>
<img v-show="active" class="index-icon-img"
:src="require(`@/assetshome/${activeImg}.png`)" />
<img v-show="!active" class="index-icon-img"
:src="require(`@/assets/home/${inactiveImg}.png`)" />
</div>
上面这种有三目运算符的写法,会在每次变换图片名时,重新发起请求获取。而第二种,获取第一次后就不会再发送请求了。
这里猜测是webpack的require方法在处理时做了不同处理,具体原因未知。先记录下问题,后面补充说明。