vue-inline-svg在Vue路由导航循环中的正确内联语法咨询

问题核心在于webpack无法解析完全动态的资源路径，需要保留静态前缀让模块打包工具提前识别资源目录，以下是两种可行的写法：

写法一：调整路由配置的iconPath为相对路径 #

将路由里的iconPath改成相对于导航组件的相对路径（比如导航组件在src/components/Nav.vue，图片在src/img/，路径就写../img/icon-thing.svg），然后直接绑定：

<template v-for="value in $router.options.routes">
  <RouterLink :to="{ name: value.name, params: { city: currentCity } }">
    <inline-svg :src="require(value.iconPath)" />
  </RouterLink>
</template>

写法二：保留原有绝对路径，拼接静态前缀 #

如果不想修改路由配置，利用Vue项目默认的@别名（指向src目录），把动态路径拼接成工具可识别的格式：

<template v-for="value in $router.options.routes">
  <RouterLink :to="{ name: value.name, params: { city: currentCity } }">
    <inline-svg :src="require('@/img' + value.iconPath.replace('/img', ''))" />
  </RouterLink>
</template>

针对Vite项目的写法 #

如果你的项目用Vite构建，不需要require，直接用原生的URL构造方法：

<template v-for="value in $router.options.routes">
  <RouterLink :to="{ name: value.name, params: { city: currentCity } }">
    <inline-svg :src="new URL(value.iconPath, import.meta.url).href" />
  </RouterLink>
</template>

内容的提问来源于stack exchange，提问作者KSPR