Nuxt 3中使用动态文件名时~/assets路径解析异常求助

方案1：使用Nuxt内置的useAsset()函数 #

这是Nuxt 3官方针对动态资源路径提供的解决方案，可直接解析~/assets别名：

<script setup>
const imageName = 'image'
const imagePath = useAsset(`~/assets/${imageName}.png`)
</script>

<template>
  <img :src="imagePath" />
</template>

useAsset()会自动处理Vite构建流程中的资源映射，确保生成正确的资源URL，避免出现路由匹配错误。

方案2：借助Vite原生的new URL()特性 #

如果偏好Vite原生语法，可通过new URL()结合import.meta.url构建资源路径：

<script setup>
const imageName = 'image'
// 路径需相对于当前组件文件，Vite会自动解析为正确的资源地址
const imagePath = new URL(`../assets/${imageName}.png`, import.meta.url).href
</script>

<template>
  <img :src="imagePath" />
</template>

若组件位于多级子目录，只需调整../的数量匹配层级即可，相比硬编码固定相对路径更易维护。

原写法失效的原因 #

直接使用:src="~/assets/${imageName}.png"时，Vue会将~/assets视为普通字符串，不会触发Nuxt的路径别名解析逻辑，最终浏览器会尝试请求不存在的/~/assets/image.png路由，导致路由匹配警告。

以上两种方案均无需将图片移至public目录，也不依赖Webpack专属的require()语法，完全适配Nuxt 3的Vite环境。

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