vue3：img使用方法设置动态路径

粉末的沉淀2024-04-05 18:04

网上有很多方法，试了一遍，只有下面这种方法是最简单并且合适我的。

我的情况特殊在icon的名字需要通过方法获取，不是简单的设置成element.icon就可以的。

html 复制代码

<img class="selectedItem-icon"
                  :src="require('@/assets/icon/components/' + getIcon(element.cptKey) + '.svg')" />

javascript 复制代码

getIcon(cptKey) {
      let icon = ''
      const index = this.optionsList.findIndex(item => item.cptKey === cptKey)
      if (index > -1) {
        icon = this.optionsList[index].icon ? this.optionsList[index].icon : 'default'
      } else {
        icon = 'default'
      }
      return icon;
    }

特别要注意，在get方法里，不要return路径，然后试图把路径直接传给html里的require，这种方式会报错，必须得在html里拼接路径。

return new URL(`../assets/img/${image}`, import.meta.url).href 的方式我也试过，会报Not allowed to load local resource的错。

参考：

Vue3使用src动态引入本地图片的详细步骤_vue.js_脚本之家