Nuxt3 Vue3：动态传递本地图片路径至组件失效求助

你的问题出在Nuxt 3不再推荐使用require处理静态资源，而且动态路径拼接的方式不符合Nuxt的资源解析规则。直接写死路径能生效，是因为构建工具会在编译阶段就解析~/assets路径，替换为正确的资源URL；但用require动态拼接时，Nuxt的资源处理器无法提前识别和处理这个路径，导致找不到模块。

下面是两种可行的解决办法：

方法一：使用Nuxt 3的useAsset函数 #

这是Nuxt官方推荐的动态加载静态资源的方式，它会正确解析~/assets路径并返回资源的URL：

<template>
  <img :src="useAsset(`~/assets/img/${fileName}`)" />
</template>

<script setup>
const fileName = 'tds_logo.png'
</script>

方法二：将图片移至public目录 #

如果不需要Nuxt对图片进行构建优化（比如压缩、哈希命名），可以把图片放到项目根目录的public/img文件夹下，然后直接用绝对路径访问：

<template>
  <img :src="`/img/${fileName}`" />
</template>

这种方式下，图片会被直接复制到最终的输出目录，无需经过构建工具处理。

需要注意的是：

• 确保fileName变量的值完全正确，没有多余的空格或拼写错误
• ~/assets下的资源会被Nuxt的构建工具处理（比如添加哈希后缀），而public下的资源保持原路径

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