补充一下你的 "getStaticResource" 函数。我猜测是你的 "getStaticResource" 会发起 "xhr"
请求导致的你现在描述的多次请求的问题。
可以把你的 "getStaticResource" 返回的资源URL放到一个变量当中保存起来,比如说 "staticImgAssets"。每次使用的时候
":src="staticImgAssets[direction]"" 这样来使用就好了。
***
正常来说应该是没有问题的,我写了一个Demo 👉 "Vue SFC
Playground" (https://link.segmentfault.com/?enc=FGbiQkO%2BqBG8jt6AIeziAQ%3D%3D.mXqld1k3gFja8YfjeWulWHGSygivFX0Jk8yw6PThj%2FYHgtMkO%2B4emcdmreAvUPTJKhwN3VkfI9EDZGdA%2BUexYtyzYgGp%2Bzq12wStQ4IF%2Fox0vyLrs9wrVUDDy3tNQRiYqx%2FBvLBs8sRbQ49OBjKOO6ZDmJ2jnJ8CngV5Ruvu5FkhZuwLWLrqyi%2BSujE%2F9fjLD%2FbLYW4ETb0%2BUF6PzOrNhNXhXmM%2BUgxghxdTDzE%2FGmt0gnr8COJ6A0YPbGVZyuorlYyvvbi1ABHwZZUiD9IREjqqIGDUe91lJx9sWjXxZt0x4h43wZhedn4bxzvsreo3i6W%2BOUtmeIUhrhfGZoCVOIHC%2FSeTGD6P8%2BMQQjwxRcuj5%2FKrxvXwgOahQNVzDbm8K785MWKJMpD8geAFPdxVEHL9j8oPbD1PjWZf3VopfqZLDkHLE%2BigbkS3RglxLe1JnSgMRMwjALqEe10jz2eIBwrEwyC6%2FQZyD%2FM7I7VKplt7Kzr69TSUUdDytAw3K%2BIxDmQPp0kw43uvW6eybZruDa20dh8mrFkEB8hJnI%2Ftukyn0QwJB7fPvbrB%2FkYFO5lBRA%2Bsf5I2yjJJqD74lSc6Vab0ZaygtOojxO%2BEx4yrqopnnMB1wFUkDlgRrqi1Hey0xaFuERpR5oE1sdgaeF99nSKMtEd3mtokpOoWgql2MyfnBvEjPJZwFcu4yhvuyU0jo62VKazU%2BUVCXc9QSP8PmDGvEzBIkpnL1Nwe60nS3RYmZwg6vzgwB4taAYxPsK%2BMGm82LMRggfXnwgbrJ4bK27%2FhOI0oUuHpE1fGE5LjRiyQLQpKNNj6yxCoV2SWjvsoBLzk5GdnLHSzIorZUQeYrOu2HV0P6aQFGeivHWkgzyQI7BokNxsold6q%2BByXjSPLpnj2aKVWaqKI5%2FMTxkP7xPfjuO8R8AevsY2axKWR%2FlPMr%2FnxeZLdnFVk%2BrDhen9K9iqfR6cIt%2F2cHcMsJKFSDg%3D%3D)
只会发起一次网络请求,后续的请求会直接读取的浏览器缓存。当然也不排除可能是因为缓存的问题,比如说你们的HTTP服务开启了图片资源不缓存之类的策略。
***
但其实如果你的图片资源是固定的,可以使用类似于 "v-show" 之类的操作来处理。而不是在一个 "img" 元素中修改 "src" 属性来达成目标需求。