Nuxt3动态图片开发环境正常显示，构建后无法加载

开发环境下动态绑定的图片能正常显示，但执行yarn build后无法加载，核心原因是Nuxt3构建时会对assets目录下的资源进行打包优化（重命名、归类），直接使用字符串路径的话，打包工具无法识别并处理这些资源，导致构建后路径失效。以下是几种可行的解决办法：

方法一：使用useAsset组合式函数 #

通过Nuxt提供的useAsset函数解析资源路径，确保构建时能正确识别并处理assets里的图片：

// 在组件中处理person数据时引入并使用useAsset
import { useAsset } from '#imports'

const processedPerson = {
  ...person,
  imageUrl: useAsset(person.imageUrl)
}

模板代码保持不变：

<img class="rounded-lg object-cover shadow-lg" :src="processedPerson.imageUrl" alt="" />

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

把图片从assets/images/team/移动到public/assets/images/team/下，public目录下的资源会被原封不动复制到构建后的dist目录，无需额外处理即可通过原路径访问：

• 移动后JSON配置里的imageUrl路径保持不变
• 模板代码也不需要修改

方法三：使用Vite原生的import.meta.resolve #

借助Vite的import.meta.resolve方法解析资源的绝对路径：

const resolveImagePath = (relativePath) => {
  return new URL(relativePath, import.meta.url).href
}

const processedPerson = {
  ...person,
  imageUrl: resolveImagePath(person.imageUrl)
}

模板中使用处理后的路径即可。

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