Nuxt3路由嵌套后本地图片显示404问题求助

• 改用根路径引用图片
  别用../assets/xxx.png这类相对路径，嵌套路由会改变相对路径的基准层级，直接用~/assets/images/xxx.png这种基于项目根目录的写法，Nuxt会自动解析正确的资源路径。

• 规范图片存放位置
  确保本地图片都放在项目根目录的assets文件夹内，不要把图片放在pages下的路由嵌套文件夹里。Nuxt默认只会处理assets和public目录下的静态资源，路由文件夹里的资源不会被正确打包和解析。

• 使用useStaticAsset处理路径
  在组件里借助Nuxt提供的useStaticAsset函数生成正确的资源路径，示例代码：

  <template>
    <img :src="useStaticAsset('~/assets/images/checkout-bg.png')" alt="Checkout Background">
  </template>
  

  这个函数会自动适配开发和生产环境的资源路径，避免路由层级导致的解析错误。

• 检查Nuxt配置文件
  打开nuxt.config.ts确认没有修改过assetsDir配置项，如果自定义了资源目录，要确保图片引用路径和配置的目录一致。

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